JavaScript 事件冒泡與捕獲怎樣控制

在 JavaScript 中，事件冒泡和捕獲是事件傳播的兩種機(jī)制。要控制這兩種機(jī)制，你可以使用以下方法：

1. 使用 addEventListener 方法的第三個(gè)參數(shù)：

   當(dāng)使用 addEventListener 方法為元素添加事件監(jiān)聽器時(shí)，可以傳遞一個(gè)可選的第三個(gè)參數(shù)。這個(gè)參數(shù)決定了事件觸發(fā)時(shí)，監(jiān)聽器的執(zhí)行順序。取值如下：

   • false（默認(rèn)值）：事件觸發(fā)時(shí)，監(jiān)聽器按照它們被添加的順序執(zhí)行，即事件冒泡階段先執(zhí)行捕獲階段的監(jiān)聽器，然后執(zhí)行目標(biāo)元素上的監(jiān)聽器，最后執(zhí)行冒泡階段的監(jiān)聽器。
   • true：事件觸發(fā)時(shí)，監(jiān)聽器按照它們被添加的逆序執(zhí)行，即事件冒泡階段先執(zhí)行目標(biāo)元素上的監(jiān)聽器，然后執(zhí)行捕獲階段的監(jiān)聽器，最后執(zhí)行冒泡階段的監(jiān)聽器。

   示例：

   const button = document.querySelector('button');
   const parent = button.parentElement;
   
   function bubbleHandler() {
     console.log('Bubble handler');
   }
   
   function captureHandler() {
     console.log('Capture handler');
   }
   
   parent.addEventListener('click', bubbleHandler, false); // 事件冒泡階段執(zhí)行
   parent.addEventListener('click', captureHandler, true); // 事件捕獲階段執(zhí)行
   

2. 使用 Event 對象的 stopPropagation 方法：

   當(dāng)事件觸發(fā)時(shí)，你可以使用 stopPropagation 方法阻止事件繼續(xù)傳播。這樣，事件就不會(huì)觸發(fā)冒泡或捕獲階段的監(jiān)聽器。

   示例：

   const button = document.querySelector('button');
   const parent = button.parentElement;
   
   function bubbleHandler() {
     console.log('Bubble handler');
   }
   
   function captureHandler() {
     console.log('Capture handler');
   }
   
   parent.addEventListener('click', bubbleHandler);
   parent.addEventListener('click', captureHandler);
   
   button.addEventListener('click', (event) => {
     event.stopPropagation(); // 阻止事件冒泡
   });
   

通過合理地設(shè)置第三個(gè)參數(shù)和調(diào)用 stopPropagation 方法，你可以根據(jù)需要控制事件冒泡和捕獲的執(zhí)行順序。