JS事件对象

1. 什么是事件对象

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

比如：

1. 谁绑定了这个事件。
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

2. 事件对象的使用

事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。

所以，在事件处理函数中声明1个形参用来接收事件对象。

例子：

  eventTarget.onclick = function(event) {
     // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt 
  } 
  eventTarget.addEventListener('click', function(event) {
    // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt 
  }）
// event谁传递的？
// 函数的形参是由谁传递的？  调用者传递
// 事件处理程序是谁调用的。
// js引擎调用，div.onclick(e);
// 当事件发生之后，js引擎将事件相关信息封装为一个对象，e。调用事件处理程序时将e传递
//  var obj = {
//         name:'',
//         onclick:function(e){

//         }

// }
// obj.onclick(e);

应用场景：什么时候添加形参e：事件处理程序中需要用到事件对象，那么就添加形参e

3. 事件对象的兼容性处理

事件对象本身的获取存在兼容问题：

1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。

语法：

兼容写法：
e = e || window.event;
这个利用了短路逻辑运算：
如果浏览器支持e，而e转boolean为true，则直接返回e
如果浏览器不支持e，会去识别window.event，然后返回window.event

代码：

<div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // 事件对象
                e = e || window.event;
                console.log(e);
        }
    </script>

4. 事件对象的属性和方法

• 重点： target，preventDefault()，stopPropagation()