事件捕獲階段：事件從最上一級標簽開始往下查找，直到捕獲到事件目標(target)。
事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽。
用圖示表示如下：
1、冒泡事件：
事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。通俗來講就是，就是當設定了多個div的嵌套時；即建立了父子關系，當父div與子div共同加入了onclick事件時，當觸發了子div的onclick事件后，子div進行相應的js操作，但是父div的onclick事件同樣會被觸發。
<html lang="en"> <head> <meta charset="UTF-8"> <title>測試事件冒泡</title> <style> div{padding:40px;} #div1{background: #00B83F;} #div2{background: #2a6496} #div3{background: #93C3CF} </style> <script> window.onload=function (){ var odiv1=document.getElementById("div1"); var odiv2=document.getElementById("div2"); var odiv3=document.getElementById("div3"); function fdiv1(){ alert("div1"); } function fdiv2(){ alert("div2"); } function fdiv3(ev){ alert("div3"); } odiv1.onclick=fdiv1; odiv2.onclick=fdiv2; odiv3.onclick=fdiv3; } </script> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> </body> </html>
測試結果:點擊div3時，依次彈出div3,div2,div1
2.阻止事件冒泡：
給div3的綁定事件改為。ev.canceBubble=true;
function fdiv3(ev){
var en=ev || event;
en.cancelBubble=true;
alert("div3");
}
測試結果：點擊div3時，只彈出div3
3、事件捕獲：
從頂層元素到目標元素或者從目標元素到頂層元素，和事件冒泡是一個相反的過程。事件從最不精確的對象(document 對象)開始觸發，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發人員特別指定)。
代碼更改如下：
<script> window.onload=function (){ var odiv1=document.getElementById("div1"); var odiv2=document.getElementById("div2"); var odiv3=document.getElementById("div3"); odiv1.addEventListener("click",function(){ alert("div1"); },true); odiv2.addEventListener("click",function(){ alert("div2"); },true); odiv3.addEventListener("click",function(){ alert("div3"); },true); } </script>
測試結果:點擊div3時，依次彈出div1,div2,div3
結論：綁定事件時通過addEventListener函數，它有三個參數，第三個參數若是true，則表示采用事件捕獲，若是false，則表示采用事件冒泡。