当鼠标点击所看到的的按钮时,其实发生了一系列的事件传递,可以想象一下,button实际上是被body“包裹”起来的,body是被html“包裹”起来的,html是被document“包裹”起来的,document是被window“包裹”起来的。所以,在你的鼠标点下去的时候,最先获得这个点击的是最外面的window,然后经过一系列传递才会传到最后的目标button,当传到button的时候,这个事件又会像水底的泡泡一样慢慢往外层穿出,直到window结束。
综上,一个事件的传递过程包含三个阶段,分别称为:
捕获阶段,目标阶段,冒泡阶段
目标指的就是包裹得最深的那个元素。
实例:
<div id='d'>
<p id='p'>
<span id='s'>Click Me!</span>
</p>
</div>
var div = document.getElementById('d');
var p = document.getElementById('p');
var span = document.getElementById('s');
function onClickFn (event) {
var tagName = event.currentTarget.tagName;
var phase = event.eventPhase;
console.log(tagName + " " + phase);
}
div.addEventListener('click', onClickFn, false);
p.addEventListener('click', onClickFn, false);
此时,点击“Click Me!”,即可在控制台看到如下结果:
P 3
DIV 3
phase为3说明事件在冒泡阶段响应的。数字对应三个阶段3:冒泡阶段,2:目标阶段,1:捕获阶段
将参数改为true将看到:
DIV 1
P 1
说明事件在捕获阶段响应的。
由此,addEventListener的第三个参数设置为true和false的区别已经非常清晰了:
true表示该元素在事件的“捕获阶段”(由外往内传递时)响应事件;
false表示该元素在事件的“冒泡阶段”(由内向外传递时)响应事件。
原文链接:http://my.oschina.net/u/1454562/blog/205010