addEventListener对于前端工作人员来说，并不陌生。
事件冒泡和事件捕获对于前端工作人员也并不陌生。
这篇文章的主要目的是解决一个问题，对同一个dom同时绑定两个事件，一个用事件冒泡，一个用事件捕获，那么触发顺序是怎样的。
接下来先介绍几个基本概念
DOM2级事件，规定事件流的3个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。其中，定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener和removeEvenListener。
addEventListener( event , function , boolean )。其中event指定事件类型，function为触发事件时执行的函数，boolean值为true时，在捕获阶段触发事件，false时，在冒泡阶段触发事件。
事件冒泡，由最具体的元素接收，然后逐级上传到最不具体的元素（document）
事件捕获，是由不具体的节点（document）接收，然后向下传播到最具体的元素。
<div id="one">test</div>
执行结果是，先弹capture后弹bubble。
现在，给one增加一个子元素。有如下html
<div id="one'><div id="two">test</div></div>
有如下js
执行结果，capture one , capture two , bubble two, bubble one
点击test，首先在捕获阶段 从document逐级向下检查，有没有捕获阶段执行的事件，在父元素one上有，所以弹出capture one 。目标阶段，two上绑定两个事件，按照事件注册顺序执行，这里的执行结果是capture two bubble one。冒泡阶段，从two处开始检测，一直到document，执行绑定在one上的冒泡事件，弹出bubble two。
网友评论