本文實例分析了JS冒泡事件與事件捕獲。分享給大家供大家參考，具體如下：
案例
<!DOCTYPE html><html><head> <title>冒泡事件</title> <script type="text/javascript"> window.onload = function(){ window.onclick = function(){ alert("Window"); // 頂級 }; document.onclick = function(){ alert("Document"); // 次頂級 }; document.documentElement.onclick = function(){ alert("Html"); // 次次頂級 }; document.body.onclick = function(){ alert("Body"); // 次次次頂級 }; document.getElementById("myDiv").onclick = function(){ alert("Div"); // 最先執(zhí)行，并且會傳遞到上一層。點擊兩次，則按順序執(zhí)行兩次。如果上級也有點擊事件的話 }; } </script></head><body> <div id="myDiv">點我</div></body></html>小結(jié)
1.點擊myDiv。依次是Div-Body-Html-Document-Window
2.點擊其他空白地方。依次是Html-Document-Window
3.連續(xù)點擊兩次，會按順序執(zhí)行兩次
4.冒泡的前提是，父級也定義了相應(yīng)的事件
再看一個更復(fù)雜的例子
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>事件捕捉</title> <script type="text/javascript"> window.onload = function(){ window.addEventListener("click", function(){ alert("Window - true"); }, true); // true - 事件句柄在捕獲階段執(zhí)行 ,false- false- 默認。事件句柄在冒泡階段執(zhí)行 document.addEventListener("click", function(){ alert("Document - true"); }, true); document.documentElement.addEventListener("click", function(){ alert("Html - true"); }, true); document.body.addEventListener("click", function(){ alert("Body - true"); }, true); document.getElementById("myDiv").addEventListener("click", function(){ alert("Div - true"); }, true); window.addEventListener("click", function(){ alert("Window - false"); }, false); // true - 事件句柄在捕獲階段執(zhí)行 ,false- false- 默認。事件句柄在冒泡階段執(zhí)行 document.addEventListener("click", function(){ alert("Document - false"); }, false); document.documentElement.addEventListener("click", function(){ alert("Html - false"); }, false); document.body.addEventListener("click", function(){ alert("Body - false"); }, false); document.getElementById("myDiv").addEventListener("click", function(){ alert("Div - false"); }, false); window.onclick = function(){ alert("Window - click"); // 頂級 }; document.onclick = function(){ alert("Document - click"); // 次頂級 }; document.documentElement.onclick = function(){ alert("Html - click"); // 次次頂級 }; document.body.onclick = function(){ alert("Body - click"); // 次次次頂級 }; document.getElementById("myDiv").onclick = function(){ alert("Div - click"); // 最先執(zhí)行，并且會傳遞到上一層。點擊兩次，則按順序執(zhí)行兩次。如果上級也有點擊事件的話 }; } </script></head><body> <div id="myDiv">點我</div></body></html>小結(jié)
1.點擊的執(zhí)行結(jié)果是
Window - true
Document - true
Html - true
Body - true
Div - true
Div - false
Div - click
Body - false
Body - click
Html - false
Html - click
Document - false
Document - click
Window - false
Window - click
2.順序與js代碼順序無關(guān)
3.就算沒有定義點擊事件，一樣可以捕獲點擊事件，只要點擊到，就能捕獲到
再次改造，阻止冒泡
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>事件捕捉</title> <script type="text/javascript"> window.onload = function(){ document.addEventListener("click", function(){ alert("Document - true"); }, true); window.addEventListener("click", function(){ alert("Window - true"); }, true); // true - 事件句柄在捕獲階段執(zhí)行 ,false- false- 默認。事件句柄在冒泡階段執(zhí)行 document.documentElement.addEventListener("click", function(){ alert("Html - true"); }, true); document.body.addEventListener("click", function(){ alert("Body - true"); }, true); document.getElementById("myDiv").addEventListener("click", function(){ alert("Div - true"); }, true); window.addEventListener("click", function(){ alert("Window - false"); }, false); // true - 事件句柄在捕獲階段執(zhí)行 ,false- false- 默認。事件句柄在冒泡階段執(zhí)行 document.addEventListener("click", function(){ alert("Document - false"); }, false); document.documentElement.addEventListener("click", function(){ alert("Html - false"); }, false); document.body.addEventListener("click", function(){ alert("Body - false"); }, false); document.getElementById("myDiv").addEventListener("click", function(){ alert("Div - false"); }, false); window.onclick = function(){ alert("Window - click"); // 頂級 }; document.onclick = function(){ alert("Document - click"); // 次頂級 }; document.documentElement.onclick = function(){ alert("Html - click"); // 次次頂級 }; document.body.onclick = function(){ alert("Body - click"); // 次次次頂級 }; document.getElementById("myDiv").onclick = function(){ alert("Div - click"); // 最先執(zhí)行，并且會傳遞到上一層。點擊兩次，則按順序執(zhí)行兩次。如果上級也有點擊事件的話 event.stopPropagation(); // 阻止冒泡 }; } </script></head><body> <div id="myDiv">點我</div></body></html>小結(jié)
Window - true
Document - true
Html - true
Body - true
Div - true
Div - false
Div - click
終止了，沒有后續(xù)的內(nèi)容了
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
新聞熱點
疑難解答
