JS事件流与DOM事件处理程序

在Javascript的DOM中，关于事件Event对象的知识是一定要掌握的。Event对象模型主要分为两个部分，一个是Event对象本身具有的属性和方法，这个参照API就可以学得；另一个是在DOM节点上绑定的事件，例如click，dblclick，mouseenter等，以及事件在DOM节点中的传播。今天我们主要就javascript中事件流的传播过程以及不同DOM级事件处理程序进行讲解。

事件流

事件流可以理解为事件在页面的DOM节点之间传播的顺序，主要分为三个过程，分别是：事件捕获阶段 --> 事件目标阶段 --> 事件冒泡阶段，从下图可以看出事件的传播过程



DOM的事件流

事件捕获

事件捕获的思想是页面上最外层的节点先接收事件，然后向内层元素逐级传播。例如上面的例子中，事件捕获阶段的传播顺序为：window --> document --> html --> body --> table --> tbody --> tr --> td

事件冒泡

事件冒泡和事件捕获刚好相反，它的思想是让最内层节点先接收事件，然后向外层逐级传播。上面的例子中，事件冒泡阶段传播顺序为：td --> tr --> tbody --> table --> body --> html --> document --> window

事件目标阶段

不管在事件传播阶段还是在事件冒泡阶段，都必然经历事件目标阶段，表示对DOM节点的事件进行处理

事件处理程序

事件处理程序实际上就是绑定在DOM节点上的事件函数。在W3C标准中，分为DOM0，DOM2和DOM3，而在DOM1中没有定义事件相关内容，因此没有DOM1级事件模型。


通过将函数直接赋值给事件处理属性，在DOM0中只支持事件冒泡的过程



DOM0事件处理程序


在DOM2中，事件处理过程会通过不同的参数配置来决定是采用事件捕获还是事件冒泡，还是两个过程都执行。由于浏览器的不同，DOM2中事件绑定方法也不一样

IE浏览器

在IE10及以下版本的浏览器中，只支持事件冒泡，而在IE11中又添加了对事件捕获的支持。在IE10及以下版本中，通过下列方法添加或删除事件



IE10以下事件处理程序

非IE浏览器



非IE的事件处理程序

通过useCapture参数来确定采用哪种方式，true表示事件捕获，false表示事件冒泡，默认状态为false。



相同点

（1）支持同一个元素上绑定多个事件处理函数



多个事件处理函数

（2）不能删除匿名函数，删除时必须和绑定的函数一致



不能删除匿名函数

不同点

（1）在使用attachEvent方法为同一个事件添加多个函数时，执行顺序与绑定的顺序相反



attachEvent绑定事件

（2）attachEvent执行的作用域指向全局环境，因此this指向window；而addEventListener执行的作用域在DOM元素内部，因此this指向绑定的元素

兼容性处理



兼容性处理


DOM3在保留了DOM2特性的基础上，添加了一些新方法。最大的改进就是DOM3允许自定义事件，通过createEvent()方法完成，返回的方法通过initCustomEvent()方法来初始化。



DOM3自定义事件

上述例子表示，创建一个冒泡事件'myEvent'，然后绑定在div和document上，因为采用事件冒泡，因此会先alert出‘div myEvent’，再输出‘document myEvent’。

总结

以上是一些关于Event的事件流和不同DOM级事件处理程序知识的介绍，希望对大家有用。