JavaScript中关于事件绑定、冒泡、捕获和执行顺序

有空总结了下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()阻止事件的继续传播