接下来我用DOM2级事件的例子来演示一下:
事件冒泡:直系亲属树结构中,点击某个元素,由于冒泡作用,亲属树上的元素凡是添加了事件的,都会被触发。
<!--html-->
<div>
<p>点我</p>
</div>
// js
document.querySelector('div').addEventListener('click', function(){
alert('div事件被捕捉');
},false);
document.querySelector('p').addEventListener('click', function(){
alert('p事件被捕捉');
},false);//最后参数为默认false,代表冒泡事件
通过测试我们可以看到,当点击p标签触发事件句柄,之后div标签的事件句柄也随之触发了,这就说明了冒泡事件!
事件捕获:和事件冒泡相反,从上往下,先会触发上级事件,再往下一次触发!
<!--html-->
<div>
<p>点我</p>
</div>
// js
document.querySelector('div').addEventListener('click', function(){
alert('div事件被捕捉');
},true);
document.querySelector('p').addEventListener('click', function(){
alert('p事件被捕捉');
},true);//最后参数为true,代表事件捕捉
通过测试我们可以看到,点击p标签之后,先会触发div标签的事件句柄,然后才会触发p标签的事件句柄!