十七、DOM之事件对象 ------ 2020-01-05

1、通过例子理解事件对象：

box.onclick = function (e) {
    // 定义一个形参 e 用来接收方法执行的时候，浏览器传递的信息值
   //（事件对象：鼠标事件对象、键盘事件对象、普通事件对象...）
}
//事件对象：浏览器传递的本次事件触发时产生的一个事件信息；

2、事件对象中常用的属性：

/**
（1）e.target ： 事件源（操作的是哪个元素）;
（2）e.clientX/e.clientY ：当前鼠标触发点距离当前窗口左上角的 X/Y轴坐标；
（3）e.pageX/e.pageY：当前鼠标触发点距离body（第一屏幕，包括滚动出去的距离）
   左上角的X/Y轴坐标；
（5）e.type：当前事件的事件类型；

（5）e.perventDefault()：阻止事件的默认行为；
（6）e.stopPropagation()：阻止事件的冒泡传播；
（7）e.code ：当前按键 “keyE”;
（8）e.key ：当前按键“e”；
（9）e.which/e.keyCode：当前按键的键盘码；

*/

3、事件对象e中的键盘码的兼容性：

// IE中使用的是e.code
// 其他浏览器一般使用e.which

// 兼容性写法：
let code = e.which || e.keyCode;

4、事件对象的兼容问题：

box.onclick = function (e) {
 /**
在IE低版本浏览器中，浏览器执行绑定的方法，并没有把事件对象传递进来，此时 e = undefined，
需要基于window.event来获取（由于是全局属性，鼠标的每次事件操作都会把上一次的值替换掉）；
*/
}

5、对事件对象的一些深入理解：

/**
1、事件对象是用来存储本次操作的相关信息的，和这次操作有关，和元素无必然的联系；
2、当我们基于鼠标或者键盘等操作的时候，浏览器会把本次操作的信息存储起来
（标准浏览器是存储到默认的内存中的，具体存储在哪我们自己是找到不到），
 IE低版本浏览器存储到window.event中；存储的是一个对象（堆内存）；操作肯定 会触发某个行为，
 把绑定的方法执行，此时标准浏览器会把这个存储在内存中的对象当做实参传递给 每一个执行的方法，
 所以操作一次，即使再多方法中都有e，但是存储的值都是一个；
3、每一次我们出发不同的事件时，无论是IE还是标准的浏览器都会把这个事件对象给覆盖重置；
*/