事件捕獲和冒泡
image
-
事件捕獲
事件捕獲和冒泡
-
事件捕獲
addEventListener第三個(gè)參數(shù)為true
-
格式：
<div class="father"> <div class="son"></div> </div> <script> let oFather = document.querySelector(".father"); let oSon = document.querySelector(".son"); oFather.addEventListener("click", function () { console.log("father"); }, true); oSon.addEventListener("click", function () { console.log("son"); }, true); //先打印father再打印son </script>
-
事件冒泡
addEventListener第三個(gè)參數(shù)為false竹揍，默認(rèn)為false
-
格式：
<div class="father"> <div class="son"></div> </div> <script> let oFather = document.querySelector(".father"); let oSon = document.querySelector(".son"); oFather.addEventListener("click", function () { console.log("father"); }, false); oSon.addEventListener("click", function () { console.log("son"); }, false); //先打印son再打印father </script>
- 注意：on事件名和attachEvent都只接受兩個(gè)參數(shù)，都是冒泡事件
-
阻止事件冒泡
-
格式：
<div class="father"> <div class="son"></div> </div> <script> let oFather = document.querySelector(".father"); let oSon = document.querySelector(".son"); oFather.onclick = function () { console.log("father"); } oSon.onclick = function (event) { event = event || window.event; //兼容寫法 if (event.cancelBubble) { event.cancelBubble = true; } else { event.stopPropagation(); //IE9以上才支持 } console.log("son"); } </script>
