先貼代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>冒泡</title> <style> #a{ width: 300px; height:300px; background-color: cadetblue; } #b{ width: 200px; height:200px; background-color: chocolate; } #c{ width: 100px; height:100px; background-color: coral; } </style> </head> <body> <div id="a"> <div id="b"> <div id="c"></div> </div> </div> <script src="mainx.js"></script> </body> </html>
/** * Created by Administrator on 2016/8/10. */ (function () { var a=document.getElementById("a"); var b=document.getElementById("b"); var c=document.getElementById("c"); a.addEventListener("click",function () { console.log("a is clicked"); }); b.addEventListener("click",function () { console.log("b is clicked"); }); c.addEventListener("click",function () { console.log("c is clicked"); }); })();
運行結果如圖：
當點擊最小塊c的時候，a和b也會被點擊。也就導致了所謂的冒泡。
當js代碼修改為
/** * Created by Administrator on 2016/8/10. */ (function () { var a = document.getElementById("a"); var b = document.getElementById("b"); var c = document.getElementById("c"); a.addEventListener("click", function () { console.log("a is clicked"); }); b.addEventListener("click", function () { console.log("b is clicked"); }); c.addEventListener("click", function (event) { console.log("c is clicked"); event.stopPropagation(); }); })();
結果為：
當點擊c后，只有c被點擊
stopPropagation()方法會阻止冒泡行為。
當代碼再次修改為：
/** * Created by Administrator on 2016/8/10. */ (function () { var a = document.getElementById("a"); var b = document.getElementById("b"); var c = document.getElementById("c"); a.addEventListener("click", function () { console.log("a is clicked"); }); b.addEventListener("click", function () { console.log("b is clicked"); }); c.addEventListener("click", function (event) { console.log("c is clicked"); event.stopPropagation(); }); c.addEventListener("click",function () { console.log("c1 is clicked"); }); })();
結果為：
當點擊C的時候，兩個事件都會觸發。
在修改代碼為：
/** * Created by Administrator on 2016/8/10. */ (function () { var a = document.getElementById("a"); var b = document.getElementById("b"); var c = document.getElementById("c"); a.addEventListener("click", function () { console.log("a is clicked"); }); b.addEventListener("click", function () { console.log("b is clicked"); }); c.addEventListener("click", function (event) { console.log("c is clicked"); event.stopPropagation(); event.stopImmediatePropagation(); }); c.addEventListener("click", function (event) { console.log("c1 is clicked"); }); })();
結果為：
又變為只觸發一個事件了。
stopImmediatePropagation()方法，只阻止父類，不阻止兄弟事件。（這里寫錯了，他也阻止了兄弟事件！！！！！！！！！！！！！！！！！！！！！！！！（剁手））
冒泡告一段落
開始講三個階段：
事件的三個階段：捕獲，目標，冒泡。
捕獲階段：從外到內，監聽中設置為true,子類事件不產生
目標階段：點擊的目標
冒泡階段：從內到外
先貼代碼：
/** * Created by Administrator on 2016/8/10. */ (function () { var a = document.getElementById("a"); var b = document.getElementById("b"); var c = document.getElementById("c"); a.addEventListener("click", function () { console.log("冒泡階段的a is clicked"); }); b.addEventListener("click", function () { console.log("冒泡階段的b is clicked"); }); // c.addEventListener("click", function (event) { // console.log("c is clicked"); // // event.stopPropagation(); // event.stopImmediatePropagation(); // }); c.addEventListener("click", function (event) { console.log("目標階段的c is clicked"); }); b.addEventListener("click",function (event) { console.log("捕獲階段的b is clicked"); },true); a.addEventListener("click",function () { console.log("捕獲階段的a is clicked"); },true); })();
執行結果為：
執行順序如圖：先捕獲，后目標，在冒泡。也可理解為，從外到內，在從內到外。
另外，可以用event.eventPhase去測試是什么階段，
捕獲階段，返回值為1
目標階段，返回值為2
冒泡階段，返回值為3
自己的理解：
用法，還沒用到，以后補充(⊙﹏⊙)b；
阻止冒泡的好處，防止子元素的父類元素被點擊而觸發子類事件。
設置捕獲的好處（設置，末尾true屬性），可以是冒泡事件反向執行。
補充一點2016-10-28 11:08:55（感謝 "潘多拉之欣" 的提醒）
關於stopImmediatePropagation和stopPropagation的區別
網上大神的解釋
