整个click有两个阶段,首先由点击元素的最祖先元素一个个传递到点击元素,这是捕获阶段。再由当前元素一个个传递到祖先元素,这叫冒泡阶段。
addEventListener有第三个参数,true代表捕获阶段绑定,flase(默认)代表冒泡阶段绑定。
假设有
<div id="a">
<div id="b">
<div id="c" />
</div>
</div>
然后他们都绑定了事件
console.log("target="+e.target.id+"currentTarget="+t.currentTarget.id)
那么点击c会出现什么情况:
如果对于事件的绑定是
document.getElementById("...").addEventListener('click',function(e){...})
那么这种绑定方法是在冒泡阶段绑定的,那么输出就是
target=c currentTarget=c
target=c currentTarget=b
target=c currentTarget=a
这是因为target是触发事件的元素,currentTarget是当前这个事件是哪个元素的。
冒泡的顺序是从小到大,就是从子到父。
冒泡能被阻止。比如b的click事件里加一句
event.stopPropagation();
另外说捕获顺序。即你点击c,于是a->b->c。
虽然,DOM2级事件规定的时间流包括三个阶段:
事件捕获阶段
处于目标阶段
事件冒泡阶段
在事件流中,实际的目标在捕获阶段不会接收到事件,下一个阶段是是处于目标的阶段,这时候事件会被触发,最后进入事件冒泡阶段。
可以理解为 在冒泡阶段,当前在哪个元素,事件的目标就是哪个元素。所以在c这个元素的时候可以算作冒泡阶段,因为这时候当前元素已经是事件的currentTarget了。
一般我们认为处于目标阶段是事件冒泡阶段的一部分。
捕获的console结果和冒泡刚好相反。
target=c currentTarget=a
target=c currentTarget=b
target=c currentTarget=c
捕获可以被阻止:
event.stopImmediatePropagation();
这个也可以阻止冒泡。