<div id='outer'>
<div id='inner'></div>
</div>
document.getElementById('inner').addEventListener('click', showId);
document.getElementById('outer').addEventListener('click', showId, true);
function showId() {
alert(this.id);
}
上面的代码先弹出outer,再弹出inner。
事件流:现代浏览器事件流有三个过程:捕获阶段,目标阶段,冒泡阶段。具体到上面这个例子,当我们点击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
(冒泡阶段执行)的原因。
理解事件流,对事件委托
,事件对象中的阻止冒泡
都会有帮助。