js事件的冒泡与事件捕捉

接下来我用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标签的事件句柄！