案例
<!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"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话 }; } </script> </head> <body> <div id="mydiv">点我</div> </body> </html>
小结
1.点击mydiv。依次是div-body-html-document-window
2.点击其他空白地方。依次是html-document-window
3.连续点击两次，会按顺序执行两次
4.冒泡的前提是，父级也定义了相应的事件
再看一个更复杂的例子
<!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 - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行 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 - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行 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"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话 }; } </script> </head> <body> <div id="mydiv">点我</div> </body> </html>
小结
1.点击的执行结果是
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代码顺序无关
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 - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行 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 - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行 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"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话 event.stoppropagation(); // 阻止冒泡 }; } </script> </head> <body> <div id="mydiv">点我</div> </body> </html>
小结
window - true
document - true
html - true
body - true
div - true
div - false
div - click
终止了，没有后续的内容了