38.事件冒泡與事件捕獲的區別 · 大雜燴

* 事件冒泡：在p元素上發生click事件的順序應該是p -> div -> body -> html -> document * 事件捕獲：在p元素上發生click事件的順序應該是document -> html -> body -> div -> p ## **事件捕獲** ``` <style type="text/css"> #myDiv { width: 100px; height: 100px; background-color: #FF0000; } </style> <body> <div id="myDiv"></div> <script type="text/javascript"> var div = document.getElementById("myDiv"); div.addEventListener("click", function (event) { alert("div"); }, true); document.body.addEventListener("click", function (event) { alert("body"); }, true); </script> </body> ``` ## **事件冒泡** ``` <style type="text/css"> #myDiv { width: 100px; height: 100px; background-color: #FF0000; } </style> <div id="myDiv"></div> <script type="text/javascript"> var div = document.getElementById("myDiv"); div.onclick = function (event) { alert("div"); }; document.body.onclick = function (event) { alert("body"); }; </script> ``` ## 阻止事件冒泡和事件捕獲 `<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>` ``` <style> .one{ width: 200px; height: 200px; background: indianred } .two{ width: 100px; height: 100px; background: khaki; } </style> ``` ``` <script> var one = document.getElementsByClassName("one")[0]; var two = document.getElementsByClassName("two")[0]; one.addEventListener("click",function(){ console.log("one") },true)//加上true是事件捕獲，默認是false是事件冒泡 two.addEventListener("click",function(e){ console.log("two") //e.stopPropagation();阻止事件冒泡 }) </script> ```