addEventListener()用于向指定元素添加事件句柄
语法：element.addEventListener(event, function, useCapture)
image.png
其中第三个参数涉及到“事件流”。现代浏览器事件流有三个过程：捕获阶段，目标阶段，冒泡阶段。
下面的代码是先弹出outer还是inner呢？
image.png
具体到上面这个例子，当我们点击div#inner的时候，浏览器会沿着这条路径处理事件：document => html => body => div#outer => div#inner => div#outer => body => html => document。
捕获阶段就是捕获事件处理程序，在这个阶段，浏览器在div#outer和div#inner均捕获到了点击事件的处理程序（showId）。如果addEventListener()没有第三个参数或者参数为false，在捕获到事件的时候并不会执行，而是等到冒泡阶段才执行相应的事件处理程序。而且处理顺序是沿着事件流也就是上面的顺序来进行的。如果addEventListener()第三个参数设为true，那么在捕获阶段捕获到事件处理程序时会立即执行，这也就是为什么例子中先弹出outer（捕获阶段执行），再弹出inner（冒泡阶段执行）的原因。理解事件流，对事件委托，事件对象中的阻止冒泡都会有帮助。
因此上例中先弹出outer，在捕获阶段就率先执行。
网友评论