事件回撥在捕獲、冒泡階段，何時執行問題？
阿新 • • 發佈：2022-04-01
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box1 { width: 100px; height: 100px; background-color: red; } .box2 { width: 50px; height: 50px; background-color: pink; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> <script> // 當兩個盒子重疊，且都有相同事件繫結，點選公共部分，觸發順序問題？（以點選事件為例） // 當發生點選事件，事件處理機制會預設從html、body、box1、box2、box2、box1、body、html依次查詢帶有點選事件的元素，至於對應點選事件的callback是否執行，需要根據addEventListener('click',callback,[boolean])在註冊時，設定的布林值。 // 如果布林值為true，則表示該點選事件的callback只能在捕獲階段執行；如果布林值為false，則表示該點選事件的callback只能在冒泡階段執行；該方式繫結事件預設boolean為false，即預設在冒泡階段執行callback。 const callback1 = function () { console.log("box1"); }; const callback2 = function () { console.log("box2"); }; document .querySelector(".box1") .addEventListener("click", callback1, true); document.querySelector(".box2").addEventListener("click", callback2); // 當通過element.on'事件'=function(){} 方式繫結事件，則表示該事件的回撥在事件冒泡階段執行。 </script> </body> </html>