JavaScript 事件冒泡与捕获怎样控制

在 JavaScript 中，事件冒泡和捕获是事件传播的两种机制。要控制这两种机制，你可以使用以下方法：

1. 使用 addEventListener 方法的第三个参数：

   当使用 addEventListener 方法为元素添加事件监听器时，可以传递一个可选的第三个参数。这个参数决定了事件触发时，监听器的执行顺序。取值如下：

   • false（默认值）：事件触发时，监听器按照它们被添加的顺序执行，即事件冒泡阶段先执行捕获阶段的监听器，然后执行目标元素上的监听器，最后执行冒泡阶段的监听器。
   • true：事件触发时，监听器按照它们被添加的逆序执行，即事件冒泡阶段先执行目标元素上的监听器，然后执行捕获阶段的监听器，最后执行冒泡阶段的监听器。

   示例：

   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); // 事件冒泡阶段执行
   parent.addEventListener('click', captureHandler, true); // 事件捕获阶段执行
   

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

   当事件触发时，你可以使用 stopPropagation 方法阻止事件继续传播。这样，事件就不会触发冒泡或捕获阶段的监听器。

   示例：

   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(); // 阻止事件冒泡
   });
   

通过合理地设置第三个参数和调用 stopPropagation 方法，你可以根据需要控制事件冒泡和捕获的执行顺序。