事件对象：任何事件触发过后都会产生一个事件对象，例如：
- 是谁要绑定这个事件。
- 事件触发过后会得到什么，比如触发鼠标事件，可以得到鼠标的位置（所对应的事件对象就叫鼠标事件对象）。
- 如果是键盘触发了事件，那么就会得到一些键盘的相关信息，比如按了什么按键（所对应的事件就叫键盘事件对象）。
一、事件对象的获取
需要声明一个形参用来接收事件对象
例如：
var btn = document.querySelector('button'); btn.addEventListener('click' , function(e){}) //此处的e就是一个事件对象，也可以写成event或者evt
事件对象的获取存在兼容性问题
目前的标准浏览器包括：Opera 10.10、Safari 4.0.4、Intelnet Explorer 9、Firefox 3、Chrome。
您也可以对自己的浏览器进行验证，方法如下：
在浏览器的地址栏中复制以下地址 ，
若能看到一张笑脸，则您的浏览器是标准浏览器。
在IE678中浏览器不会用方法传递参数，需要window.event获取
兼容问题的解决方案
var div = document.querySelector('div'); div.onclick = function(e) { e = e || window.event; // 事件对象 console.log(e); }
二、事件对象的属性和方法：
属性和方法 说
e.target 返回事件源（标准浏览器）
e.srcElement 返回事件源（非标准浏览器，在 IE6~8 中）
e.type 返回事件类型
e.stopPropagation() 阻止事件冒泡（标准浏览器）
e.cancelBubble 阻止事件冒泡（非标准浏览器，在 IE6~8 中，true）
e.preventDefault() 阻止默认事件（标准浏览器） 默认事件==默认行为，比如不让链接跳转。
e.returnValue 阻止默认事件（非标准浏览器，在 IE6~8 中，false） 默认事件==默认行为，比如不让链接跳转。
e.target 和 this 的区别
e.target 是事件触发的元素，也就是所说的事件源，this是事件绑定的元素
三、阻止事件冒泡
e.stopPropagation(); //阻止事件冒泡（标准浏览器）
window.event.cancelBubble = true; //阻止事件冒泡（非标准浏览器，在 IE6~8 中）
阻止事件冒泡的兼容性处理
if (e && e.stopPropagation) { e.stopPropagation(); //阻止事件冒泡（标准浏览器） } else { window.event.cancelBubble = true;//阻止事件冒泡（非标准浏览器，在 IE6~8 中） }
以下写法不能阻止事件冒泡 ：
return false;
四、阻止默认行为
e.preventDefault(); //阻止默认事件（标准浏览器）
window.event.returnValue = false; //阻止默认事件（非标准浏览器，在 IE6~8 中，false）
兼容性问题同上述阻止事件冒泡的兼容性处理一致
但是：可以用
return false;
阻止默认行为，并且没有兼容性问题，注意区别
鼠标无法右键菜单、鼠标无法选中
oncontextmenu：无法右键
onselectstart：无法选中
网页中禁止用F12按键打开开发者工具
document.onkeydown = function(e){ var current = e.keyCode ||e.which || e.charCode; console.log('此处已经无法用f12调用开发者工具'); e = e || window.event; if (current == 123) { e.stopPropagation(); e.preventDefault(); } }
注意：仍然可以通过鼠标点击的相应菜单的操作来打开
五、鼠标事件对象的属性
鼠标事件对象属性 说明
e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX 返回鼠标相对于文档页面的X坐标（IE9+支持）
e.pageY 返回鼠标相对于文档页面的Y坐标（IE9+支持）
e.ScreenX 返回鼠标相对于电脑屏幕的X坐标
e.ScreenY 返回鼠标相对于电脑屏幕的Y坐标
六、键盘事件对象的属性
键盘事件对象属性 说明
keyCode 返回按键的ASCII码值
1.通过事件对象获取用户按下的按键
script> /* 利用keycode返回的ASCII码值来判断用户按下了那个键 */ document.onkeyup = function(e) { console.log('onkeyup:' + e.keyCode); //不区分大小写字母，返回大写字母的ASCII码值。 } document.onkeypress = function(e) { console.log('onkeypress:' + e.keyCode); //区分大小写字母，返回大小写字母的ASCII码值。 } document.onkeydown = function(e) { console.log('onkeydown:' + e.keyCode); //不区分大小写字母，返回大写字母的ASCII码值。 } </script>
2.搜索框获得鼠标焦点案例
<input type="text"> <button type="button">搜索</button> <script> var input = document.querySelector('input'); document.onkeyup = function(e) { console.log(e.keyCode); if (e.keyCode === 81) { //Q键 input.focus(); // 触发输入框的获得焦点事件 } else if (e.keyCode === 27) { //Esc键 input.blur(); // 触发输入框的失去焦点事件 } } </script>
