什么是事件流？什么是事件委托？

在前端开发（尤其是 JavaScript 中），事件流（Event Flow）和事件委托（Event Delegation） 是处理事件机制的核心概念。

一、事件流（Event Flow）

1. 定义

事件流描述了浏览器中事件触发时的传播路径和顺序。当用户与页面元素交互（如点击、鼠标移动）时，事件会从页面的某个起点开始，按照特定的顺序逐层传播，最终触发所有相关元素的事件处理程序。

2. 事件流的三个阶段（DOM 标准模型）

DOM 事件流分为三个阶段，以点击按钮为例：

<div id="parent">
  <button id="child">点击我</button>
</div>

假设点击 <button>，事件流顺序如下：

• （1）捕获阶段（Capture Phase）
  事件从 最外层元素（文档根节点） 开始，向 目标元素 方向传播。
  顺序：document → html → body → parent → child（目标元素的祖先元素依次触发捕获事件）。
  特点：默认情况下，事件处理程序在捕获阶段不会自动触发，需手动设置 addEventListener 的第三个参数为 true 开启捕获。

• （2）目标阶段（Target Phase）
  事件到达 目标元素（被点击的按钮），触发目标元素的事件处理程序。

• （3）冒泡阶段（Bubbling Phase）
  事件从 目标元素 开始，向 外层元素 反向传播，直到 文档根节点。
  顺序：child → parent → body → html → document（目标元素的祖先元素依次触发冒泡事件）。
  特点：默认情况下，事件处理程序在冒泡阶段自动触发（除非手动阻止）。

3. 示例：事件流演示

// 捕获阶段绑定事件（第三个参数为 true）
document.getElementById('parent').addEventListener('click', function() {
  console.log('parent 捕获阶段触发');
}, true);

// 冒泡阶段绑定事件（默认第三个参数为 false）
document.getElementById('parent').addEventListener('click', function() {
  console.log('parent 冒泡阶段触发');
});

document.getElementById('child').addEventListener('click', function() {
  console.log('child 触发');
});

点击按钮后的输出顺序：

1. parent 捕获阶段触发（捕获阶段）
2. child 触发（目标阶段）
3. parent 冒泡阶段触发（冒泡阶段）

4. 关键方法

• 阻止事件传播
  • event.stopPropagation()：阻止事件继续向父级传播（捕获或冒泡阶段均适用）。
  • event.stopImmediatePropagation()：阻止当前元素上所有后续事件处理程序的执行（即使绑定在同一阶段）。
• 兼容性注意
  早期 IE 浏览器（IE8 及以下）只支持冒泡阶段，现代浏览器均支持 DOM 标准事件流。

二、事件委托（Event Delegation）

1. 定义

事件委托是一种利用事件冒泡机制，将多个子元素的事件处理程序委托给父元素统一处理的技巧。
核心思想：通过监听父元素的冒泡事件，判断事件源（event.target）是否为目标子元素，从而间接处理子元素的事件。

2. 适用场景

• 动态添加的子元素：无需为每个动态创建的子元素单独绑定事件（如列表项点击）。
• 简化代码逻辑：减少事件处理程序的数量，提升性能（尤其是大量子元素时）。
• 统一管理同类事件：例如，多个按钮需要执行相似的逻辑。

3. 实现原理

假设页面中有一个动态列表：

<ul id="list">
  <!-- 动态添加的 <li> 元素 -->
</ul>

为每个 <li> 绑定点击事件时，可委托给 <ul>：

const list = document.getElementById('list');

list.addEventListener('click', function(event) {
  // 判断事件源是否为 <li>
  const target = event.target;
  if (target.tagName === 'LI') {
    console.log('点击了列表项：', target.textContent);
  }
});

4. 优点

• 性能优化：减少内存占用（只需为父元素绑定一次事件，而非每个子元素）。
• 动态适应性：新增的子元素自动具备事件处理能力（无需重新绑定）。
• 代码简洁：统一处理同类事件，避免重复代码。

5. 注意事项

• 事件源判断：通过 event.target 或 event.currentTarget 区分触发事件的元素（currentTarget 始终是绑定事件的元素，即父元素）。
• 事件类型限制：仅适用于支持冒泡的事件（如 click、mouseover、keydown 等），blur、focus 等不冒泡的事件无法委托。
• 阻止冒泡的影响：若子元素内部调用了 stopPropagation()，事件将无法冒泡到父元素，导致委托失效。

三、总结对比

通过合理利用事件流和事件委托，可以更高效地管理前端事件，提升代码的可维护性和性能。