JS之事件机制

一、绑定事件的3种方式

1、内联绑定事件

2、on+事件名，绑定事件程序

3、通过addEventListener／removeEventListener绑定事件

不支持ie9之前的浏览器，ie9之前浏览器可以通过attachEvent／detachEvent绑定事件

这两种处理事件的方法有两个区别：

1、获取事件对象不同：attachEvent需要通过window对象来调用事件对象

2、获取节点不同：attachEvent事件中需要通过读取srcElement来获取，addEventListener通过target

3、处理阻止冒泡和阻止默认事件不同：阻止冒泡一个通过事件对象调用stopPropagation方法，一个通过设置事件对象的cancleBubble为true；

阻止默认行为一个通过事件对象调用preventDefault方法，一个通过设置事件对象的returnValue为false。

二、事件处理的流程

事件处理程序绑定的事件只要冒泡阶段。

addEventListener绑定的事件有捕获和冒泡两个阶段

捕获阶段：事件触发从window到目标对象

冒泡阶段：事件触发从目标对象到window传播

addEventListener这个方法的第三个参数默认为false，触发事件时先捕获再冒泡，如果设置这个参数为true则没有冒泡阶段。

addEventListener可以给一个元素同时绑定多个事件，如果同时注册冒泡和捕获事件，则按注册顺序执行。

三、事件代理

事件代理就是利用事件冒泡的原理，通过在父元素上绑定事件，来代替在每个子元素上绑定事件，节省了大量重复的事件监听。

参考资料：

文档对象模型事件：https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event

前端工程师手册：https://leohxj.gitbooks.io/front-end-database/javascript-basic/events.html

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events