概念

事件冒泡：事件促發的最深層元素首先接收事件。然後是它的父元素，依序向上，直到document物件最終接收到事件。儘管相對於html元素來說，document沒有獨立的視覺表現，他仍然是html元素的父元素並且事件能冒泡到document元素。
隨便也說一下事件捕捉。
事件擷取：事件首先發生在DOM樹的最高層物件(document)然後往最深層的元素傳播。（注意IE6只有冒泡，沒有捕獲）
事件委託：我認為事件委託是利用冒泡原理，把事件的監聽轉換到其父元素上，也就是把事件綁定到父元素上，然後在事件中取得子元素對象，對其進行相應的操作。優點：1.提高效能2.減少程式碼量

實例

事件冒泡實例1

事件預設是在冒泡階段執行
先看下面程式碼：

登入後複製

我依序點選id1、id2、id3，執行效果如下圖：
Javascript中事件擷取、事件冒泡以及事件委託機制
解析：因為點選id3時候，先從id3開始冒泡，執行id3上綁定的事件，在冒泡到id2，執行id2，上面的事件，最後執行id1上面的事件。

事件冒泡實例2

現在開始阻止id2的冒泡，修改JS如下

window.onload=function(){ var oId1=document.getElementById('id1'); var oId2=document.getElementById('id2'); var oId3=document.getElementById('id3'); oId1.addEventListener('click',function(e){ console.log("点击了id1"); }); oId2.addEventListener('click',function(e){ console.log("点击了id2"); e.stopPropagation(); }); oId3.addEventListener('click',function(e){ console.log("点击了id3"); }); }

登入後複製

此時，我依序點擊id1、id2、id3，執行效果如下圖：
Javascript中事件擷取、事件冒泡以及事件委託機制
因為事件執行到id2，不在冒泡，故點擊id2，id3的時候，不會執行id1綁定的事件。

事件擷取實例1

為了驗證事件在擷取階段執行，我將JS程式碼改為如下：

登入後複製

此時，我依序點擊id1、id2、id3 ，執行效果如下圖：
Javascript中事件擷取、事件冒泡以及事件委託機制
解析：每次點擊，事件都會從根元素開始執行，即捕獲到，如果有事件，就執行。

事件擷取實例2

此時，我將JS程式碼改為如下：

登入後複製

此時，我依序點擊id1、id2、id3，執行效果如下圖：
Javascript中事件擷取、事件冒泡以及事件委託機制
從中發現了，一個現象，我點擊id3的時候，發現執行了id1和id2上面綁定的事件，為什麼不執行id3上面的事件呢？原來是因為取消冒泡e.stopPropagation();，也阻止了事件的捕獲。