冒泡现象： 自底向上执行事件函数
阻止冒泡： 1，window.event.cancelBubble = true //window.event存在时 2，event.stopPropagation();//window.event不存在时，使用event参数
捕获：和冒泡正好相反，但是捕获事件实际上是浏览器的真正执行顺序。若使用捕获则可在事件监听将第3个参数设为true。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ margin: 50px; background-color: burlywood; border: solid 5px red; } </style> </head> <body> <div id="divOut">我是最外层的div <div id="divMid" >我是中间的 <div id="divIn"> 我是最里层的 </div> </div> </div> <script> //先执行最里边的事件，再依次往外执行相应事件，这就是冒泡现象 /* function clickInDiv() { alert("正在执行最里边的div点击事件"); console.log(window.event); window.event.cancelBubble = true; }*/ /* function clickMidDiv() { alert("正在执行中间的div点击事件"); }*/ /*var divMid = document.getElementById("divMid"); divMid.onclick = function (ev){ alert("正在执行中间的div点击事件"); event.stopPropagation(); }*/ /*function clickOutDiv() { alert("正在执行最外边的div点击事件"); }*/ /*var divOut = document.getElementById("divOut"); divOut.addEventListener("click", function (ev) { alert("正在执行最外边的div点击事件"); ev?ev.stopPropagation():window.event.cancelBubble = true; });*/ //------------------执行捕获 var divNodes = document.getElementsByTagName("div"); for(let i = 0; i < divNodes.length; i++){ divNodes[i].addEventListener("click", function(){ alert("你点了"+divNodes[i].id); },true); } </script> </body> </html>