博客站

在 JavaScript 中，事件传播（Event Propagation）是指当 DOM 元素触发一个事件时，事件如何在 DOM 树中传递和处理的机制。事件传播分为三个阶段，确保了事件从触发元素到整个文档的传递过程能被精确控制。

事件传播的三个阶段

1. 捕获阶段（Capture Phase）

   • 事件从根节点（如 window 或 document）开始，向下逐级传递，直到到达触发事件的元素（目标元素）。
   • 默认情况下，事件监听器不会在捕获阶段触发。需通过 addEventListener 的第三个参数设置为 true 来监听捕获阶段：

     element.addEventListener('click', handler, true);
     

2. 目标阶段（Target Phase）

   • 事件到达触发它的元素（目标元素 event.target），在此阶段执行绑定在该元素上的事件监听器。
   • 注意：目标元素的监听器默认按注册顺序执行，但若某些监听器注册在捕获阶段，会先于冒泡阶段的监听器执行。

3. 冒泡阶段（Bubble Phase）

   • 事件从目标元素向上逐级传递回根节点，依次触发祖先元素上的事件监听器。
   • 大多数事件（如 click）默认会冒泡，但某些事件（如 focus）不会。

     element.addEventListener('click', handler); // 默认冒泡阶段触发
     

控制事件传播的方法

• event.stopPropagation()
  阻止事件继续传播（后续阶段的监听器不再执行）。

  element.addEventListener('click', (e) => {
    e.stopPropagation(); // 阻止捕获或冒泡
  });
  

• event.stopImmediatePropagation()
  不仅阻止传播，还会阻止同一元素上的其他监听器执行。

  element.addEventListener('click', (e) => {
    e.stopImmediatePropagation(); // 阻止其他监听器
  });
  

• event.preventDefault()
  阻止事件的默认行为（如链接跳转、表单提交），但不影响事件传播。

事件委托（Event Delegation）

利用冒泡机制，将子元素的事件监听器绑定到父元素，通过 event.target 识别触发事件的子元素。适用于动态元素或优化性能（减少监听器数量）。

示例：

<ul id="parent">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

document.getElementById('parent').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('Clicked:', e.target.textContent);
  }
});

关键区别

• event.target vs event.currentTarget
  • event.target：触发事件的原始元素（如被点击的 <li>）。
  • event.currentTarget：当前正在处理事件的元素（如绑定监听器的 <ul>）。

总结

事件传播机制使开发者能灵活控制事件处理流程。理解捕获、目标、冒泡三阶段，以及如何通过事件委托优化代码，是高效处理 DOM 事件的关键。