有空总结了下JavaScript中关于事件绑定、冒泡、捕获和执行顺序
一、事件绑定有如下几种方式:
1、直接写在HTML元素标签上,如onclick="";
2、通过dom元素属性如id, class绑定执行函数;
3、像旧版ie使用attachEvent/detachEvent方式绑定事件(不推荐)
4、使用W3C标准的addEventListener和removeEventListener(推荐)
如:addEventListener(type, listener, useCapture);
简单说下addEventListener事件:
(1)如果绑定的是同一个事件,并且都是事件冒泡类型或者事件捕获类型,那么只能绑定一次。
(2)同一个事件处理函数可以绑定2次,一次用于事件捕获,一次用于事件冒泡。
(3)不同的事件处理函数可以重复绑定。
二、事件执行顺序:
1、addEventListener和attachEvent表现一致,如果给同一个事件绑定多个处理函数,先绑定的先执行
2、捕获阶段的处理函数最先执行,其次是目标阶段的处理函数,最后是冒泡阶段的处理函数
三、事件冒泡和事件捕获
类似一棵树,事件捕获是从外向内执行;事件冒泡是从内向外执行;
四、DOM事件流
其实就是事件冒泡和事件捕获的综合运用形式;
主要为三个阶段:捕获阶段、目标阶段、冒泡阶段。
五、阻止事件冒泡和事件捕获
可以通过event.stopPropagation()阻止事件的继续传播