addEventListener那些事儿

addEventListener对于前端工作人员来说，并不陌生。

事件冒泡和事件捕获对于前端工作人员也并不陌生。

这篇文章的主要目的是解决一个问题，对同一个dom同时绑定两个事件，一个用事件冒泡，一个用事件捕获，那么触发顺序是怎样的。

接下来先介绍几个基本概念

DOM2级事件，规定事件流的3个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。其中，定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener和removeEvenListener。

addEventListener( event , function , boolean  )。其中event指定事件类型，function为触发事件时执行的函数，boolean值为true时，在捕获阶段触发事件，false时，在冒泡阶段触发事件。

事件冒泡，由最具体的元素接收，然后逐级上传到最不具体的元素（document）

事件捕获，是由不具体的节点（document）接收，然后向下传播到最具体的元素。

test

执行结果是，先弹capture后弹bubble。

现在，给one增加一个子元素。有如下html

test

有如下js

执行结果，capture one , capture two , bubble two, bubble one

点击test，首先在捕获阶段 从document逐级向下检查，有没有捕获阶段执行的事件，在父元素one上有，所以弹出capture one 。目标阶段，two上绑定两个事件，按照事件注册顺序执行，这里的执行结果是capture two  bubble one。冒泡阶段，从two处开始检测，一直到document，执行绑定在one上的冒泡事件，弹出bubble two。