浅谈Js中关于事件处理函数执行顺序的问题

Posted 2020-08-05

 

 

Js给dom元素绑定事件的处理函数总的来说有两种方式：在html文档中绑定，在js代码中绑定。

然而，并不推荐在html标签上绑定事件。

在js代码中也可以分两种方式绑定事件：

　　1：通过dom元素的onclick等属性，直接绑定；

　　2：

　　　　a.在ie下使用attachEvent/detachEvent函数的方式进行事件的绑定和取消；

　　　　b.使用W3C标准的addEventListener和removeEventListener，给dom添加事件监听者和移除。

第一种方式只能绑定一个事件处理函数，后面的会覆盖前面的。不存在事件处理函数的执行顺序问题。

在第二种方式中attachEvent和addEventListener的方法都可以绑定多个事件处理函数，而不会被覆盖。两者除了兼容性问题以外，还有其他区别：

　　1：this的含义，attachEvent中this是window，addEventListener中的this是绑定的dom对象呀；

　　2：attachEvent仅支持事件冒泡，addEventListener可以支持事件冒泡，也支持事件捕获；

 

事件处理函数的执行顺序：

　　1.如果通过addEventListener或attachEvent方法给同一个事件绑定多个处理函数，先绑定的先执行。不涉及事件冒泡和事件捕获的问题。

　　2.如果在addEventListener函数的第三个参数中设置了事件冒泡或者事件捕获的情况，那么：先调用捕获阶段的处理函数，其次调用目标阶段的处理函数，最后调用冒泡阶段的处理函数。

　　其中，目标阶段函数的执行顺序：先注册的先执行，后注册的后执行。

 

阻止事件冒泡和捕获的方法：

　　IE8以及以前可以通过 window.event.cancelBubble=true；阻止事件的继续传播；

　　IE9+/FF/Chrome通过event.stopPropagation()；阻止事件的传播。