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 方法，你可以根据需要控制事件冒泡和捕获的执行顺序。