首先了解什么是冒泡事件与捕获事件
冒泡事件：是指子元素向父元素传递的过程
捕获事件：是指父元素向子元素传递的过程
<style> div { display: flex; align-items: center; justify-content: center; } #box1 { height: 150px; background-color: red; } #box2 { 80%; height: 100px; background-color: yellow; } #box3 { 80%; height: 50px; background-color: green; } </style> <body> <div id="box1"> <div id="box2"> <div id="box3"></div> </div> </div> </body> </html> <script type="text/javascript"> var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var box3 = document.getElementById("box3"); // addEventListener 事件默认为false，也就是我们所说的事件冒泡过程 box1.addEventListener('click', function(){ alert("box1 被触发了"); }) box2.addEventListener('click', function(){ alert("box2 被触发了"); }) box3.addEventListener('click', function(){ alert("box3 被触发了"); }) // 点击box3打印结果 // box3 // box2 // box1 // 当我们将 addEventListener 设置为true时，此时就成了事件捕获的过程 box1.addEventListener('click', function(){ alert("box1 被触发了"); }, true) box2.addEventListener('click', function(){ alert("box2 被触发了"); }, true) box3.addEventListener('click', function(){ alert("box3 被触发了"); }) // 点击box3打印结果 // box1 // box2 // box3 // 阻止事件冒泡 box1.addEventListener('click', function(){ alert("box1 被触发了"); }) box2.addEventListener('click', function(event){ alert("box2 被触发了"); event.stopPropagation(); }) box3.addEventListener('click', function(){ alert("box3 被触发了"); }) // 点击box3打印结果 // box3 // box2 // 阻止事件捕获 box1.addEventListener('click', function(){ alert("box1 被触发了"); }, true) box2.addEventListener('click', function(event){ alert("box2 被触发了"); event.stopPropagation(); }, true) box3.addEventListener('click', function(){ alert("box3 被触发了"); }) // 点击box3打印结果 // box1 // box2 </script>