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標籤的事件句柄！