原生JS十四（事件对象）

一. 事件对象

事件有DOM0和DOM2的区别
DOM0就是直接通过事件写到html中的事件
DOM2就是通过addEventListener绑定/监听事件

二. 事件冒泡和捕获

事件流：从页面中接受事件的顺序(事件冒泡和事件捕获)
DOM2级包含3个事件：事件捕获阶段、处于目标阶段和事件冒泡阶段
事件的目标在捕获阶段不会接收到事件，下一阶段处于目标阶段，事件在目标上发生，在事件处理中被看成冒泡阶段的一部分

事件捕获

不太具体的Dom节点应该更早接收到事件，而最具体的节点应该最后接收到事件
从上到下，由不具体到具体

事件冒泡

IE的事件流叫做事件冒泡，即事件开始时，由最具体的元素接受，然后逐级向上传播到较为不具体的节点
从下到上，由具体到不具体

三. 事件监听

添加事件监听

addEventListener(参数1,参数2,参数3)

参数1：事件类型
参数2：触发事件后执行的函数
参数3：布尔值，是否按照事件冒泡顺序。默认为false 冒泡
代码：

显示效果：

点击前两个之后：

删除事件监听

removeEventListener(参数1,参数2,参数3)
删除时的三个参数要和添加时的三个参数相同

注意事项：
1.相同元素调用
2.相同事件名称
3.相同函数名（匿名函数不行，需要全局函数）
4.相同的执行阶段

普通事件绑定和事件监听的区别

1.普通事件绑定只能给元素相同类型的事件绑定一个，如果绑定第二个，将会覆盖上一个
事件监听可以给同一个元素的相同类型事件绑定多个
2.事件监听可以控制事件的传播方式(事件冒泡或事件捕获)
3.普通事件绑定只能通过null来取消
事件监听则可以通过删除的方法来取消事件
4.事件监听可以对动态生成的元素(未来元素)生效
普通事件绑定不可以

oncontextmenu 事件

事件在元素中用户右击鼠标时触发并打开上下文菜单。

四. 事件委托

利用事件冒泡机制指定一个事件处理程序，来管理某一类型的所有事件
即利用事件冒泡的原理，把事件加到父级上，触发执行效果
优点：1.只在内存中开辟了一块空间，节省资源的同时，减少了DOM操作，提高性能
   2.对于新添加的元素也会有之前的事件

五. event对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行
在事件发生时，负责处理事件的函数，会接收一个event对象
浏览器负责处理事件，js负责告诉浏览器如何处理
作用：用来储存事件源的信息(鼠标位置，键盘编码)
属性：兼容写法 var ev = ev || window.event

1.ev.target 返回事件源
2.ev.button 返回被鼠标按下的那个键(0为左，1为中，2为右)
3.ev.offsetX 返回鼠标在元素上x轴上的位置
4.ev.clientX 鼠标在浏览器可视区域X轴上的位置(据左距离)
5.ev.keyCode 返回键盘的编码，以次来确定是哪个键位
6.ev.scrollX 文档水平滚动的值
7.ev.stopPropagation() 阻止事件冒泡
8.ev.preventDefault() 阻止默认事件

六. this指针的指向问题

1.在普通函数外部调用的时候

代码：

显示效果：

2.在普通函数内部调用的时候

代码：

显示效果：

3.对于自执行的匿名函数而言，this指向window