javascript - 捕获阶段调用事件处理程序和冒泡阶段调用事件处理程序的区别是什么呢？

Question

DOM2级事件：指定的事件处理程序addEventListener()接受的最后一个参数，是一个布尔值，如果是true表示在捕获阶段调用，如果是false表示在冒泡阶段调用，不知道在捕获阶段调用和在冒泡阶段调用有什么区别呢？对程序的结果有什么影响吗？

Answer 1

<p id='outer'>
    <p id='inner'></p>
</p>

document.getElementById('inner').addEventListener('click', showId);
document.getElementById('outer').addEventListener('click', showId, true);

function showId() {
    alert(this.id);
}

上面的代码先弹出outer，再弹出inner。

事件流：现代浏览器事件流有三个过程：捕获阶段，目标阶段，冒泡阶段。具体到上面这个例子，当我们点击p#inner的时候，浏览器会沿着这条路径处理事件：document => html => body => p#outer => p#inner => p#outer => body => html => document。

捕获阶段就是捕获事件处理程序，在这个阶段，浏览器在p#outer和p#inner均捕获到了点击事件的处理程序（showId）。如果addEventListener()没有第三个参数或者参数为false，在捕获到事件的时候并不会执行，而是等到冒泡阶段才执行相应的事件处理程序。而且处理顺序是沿着事件流也就是上面的顺序来进行的。如果addEventListener()第三个参数设为true，那么在捕获阶段捕获到事件处理程序时会立即执行，这也就是为什么例子中先弹出outer（捕获阶段执行），再弹出inner（冒泡阶段执行）的原因。

理解事件流，对事件委托，事件对象中的阻止冒泡都会有帮助。