事件冒泡与捕获：深入理解事件传播机制

事件不是孤立的

当你点击页面上的一个按钮时，你不只是点击了这个按钮。从浏览器的角度看，你同时也点击了包含这个按钮的容器、容器的父元素、body 元素，甚至整个 document 和 window 对象。

这听起来可能有点奇怪，但仔细想想就会明白：就像你在房间里拍手，声音不仅传到你面前的人，也会传到房间里的每个角落。事件也是如此，它不会局限于触发的那个元素，而是会沿着 DOM 树进行传播。

这种传播机制就是事件冒泡（Event Bubbling）和事件捕获（Event Capturing）。理解它们的工作原理，对于编写高效、优雅的事件处理代码至关重要。

事件流的三个阶段

当事件发生时，它会经历三个阶段：

1. 捕获阶段（Capturing Phase）

事件从最外层的 window 对象开始，沿着 DOM 树向下传播，逐层穿过每个父元素，直到达到目标元素。

这个过程就像一滴水从树顶滴落，逐层经过每个树枝，最终到达目标叶子。

2. 目标阶段（Target Phase）

事件到达实际触发事件的元素，也就是用户真正点击或操作的那个元素。

3. 冒泡阶段（Bubbling Phase）

事件从目标元素开始，沿着 DOM 树向上冒泡，逐层穿过每个父元素，最终到达 window 对象。

这个过程就像水中的气泡，从底部升到水面。

完整示例

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

const grandparent = document.getElementById("grandparent");
const parent = document.getElementById("parent");
const child = document.getElementById("child");

// 捕获阶段监听器（第三个参数为 true）
window.addEventListener("click", () => console.log("window 捕获"), true);
document.addEventListener("click", () => console.log("document 捕获"), true);
grandparent.addEventListener(
  "click",
  () => console.log("grandparent 捕获"),
  true
);
parent.addEventListener("click", () => console.log("parent 捕获"), true);
child.addEventListener("click", () => console.log("child 捕获"), true);

// 冒泡阶段监听器（第三个参数为 false 或省略）
child.addEventListener("click", () => console.log("child 冒泡"));
parent.addEventListener("click", () => console.log("parent 冒泡"));
grandparent.addEventListener("click", () => console.log("grandparent 冒泡"));
document.addEventListener("click", () => console.log("document 冒泡"));
window.addEventListener("click", () => console.log("window 冒泡"));

当你点击按钮时，控制台输出：

window 捕获
document 捕获
grandparent 捕获
parent 捕获
child 捕获
child 冒泡
parent 冒泡
grandparent 冒泡
document 冒泡
window 冒泡

事件传播路径如下：

捕获阶段：window → document → grandparent → parent → child
目标阶段：child
冒泡阶段：child → parent → grandparent → document → window

默认是冒泡阶段

在日常开发中，绝大多数情况下我们都在冒泡阶段监听事件。事实上，addEventListener 的第三个参数默认是 false，也就是在冒泡阶段执行：

// 这两种写法效果相同
element.addEventListener("click", handler);
element.addEventListener("click", handler, false);
element.addEventListener("click", handler, { capture: false });

只有在需要在捕获阶段拦截事件时，才会将第三个参数设为 true：

// 在捕获阶段执行
element.addEventListener("click", handler, true);
element.addEventListener("click", handler, { capture: true });

为什么需要冒泡

事件冒泡机制看似复杂，但它带来了巨大的便利，最典型的应用就是事件委托（Event Delegation）。

不使用事件委托的问题

假设有一个包含 100 个列表项的列表，每个列表项都需要响应点击事件：

// ❌ 低效的做法：为每个列表项添加监听器
const items = document.querySelectorAll(".list-item");

items.forEach((item) => {
  item.addEventListener("click", function (event) {
    console.log("点击了:", this.textContent);
    this.classList.toggle("selected");
  });
});

// 问题：
// 1. 创建了 100 个监听器，占用内存
// 2. 如果动态添加新列表项，需要再次绑定事件
// 3. 移除列表项时，监听器可能造成内存泄漏

使用事件委托的优势

利用事件冒泡，可以只在父元素上添加一个监听器：

// ✅ 高效的做法：事件委托
const list = document.querySelector(".list");

list.addEventListener("click", function (event) {
  // 判断点击的是否是列表项
  if (event.target.matches(".list-item")) {
    console.log("点击了:", event.target.textContent);
    event.target.classList.toggle("selected");
  }
});

// 优势：
// 1. 只有 1 个监听器，节省内存
// 2. 动态添加的列表项自动支持点击
// 3. 移除列表项时不需要清理监听器

事件从列表项冒泡到 list 元素，我们在 list 上拦截并判断是哪个子元素触发的事件。

更复杂的委托场景

<ul class="todo-list">
  <li class="todo-item">
    <input type="checkbox" class="toggle" />
    <span class="text">学习事件冒泡</span>
    <button class="delete">删除</button>
    <button class="edit">编辑</button>
  </li>
  <!-- 更多列表项 -->
</ul>

const todoList = document.querySelector(".todo-list");

todoList.addEventListener("click", function (event) {
  const target = event.target;

  // 点击删除按钮
  if (target.matches(".delete")) {
    const item = target.closest(".todo-item");
    deleteItem(item);
  }
  // 点击编辑按钮
  else if (target.matches(".edit")) {
    const item = target.closest(".todo-item");
    editItem(item);
  }
  // 点击文本
  else if (target.matches(".text")) {
    const item = target.closest(".todo-item");
    viewDetail(item);
  }
});

// 复选框使用 change 事件
todoList.addEventListener("change", function (event) {
  if (event.target.matches(".toggle")) {
    const item = event.target.closest(".todo-item");
    toggleItem(item);
  }
});

这种模式只用了两个监听器就处理了列表中所有元素的所有交互，无论列表有多少项。

阻止事件传播

有时候我们不希望事件继续传播，可以使用几个方法来控制。

stopPropagation() - 停止传播

stopPropagation() 方法会阻止事件继续传播，但不会阻止同一元素上的其他监听器执行：

child.addEventListener("click", function (event) {
  console.log("child 点击");
  event.stopPropagation(); // 阻止冒泡
});

parent.addEventListener("click", function () {
  console.log("parent 点击"); // 不会执行
});

实际应用场景：

// 模态框：点击背景关闭，点击内容不关闭
const modal = document.querySelector(".modal");
const modalContent = modal.querySelector(".modal-content");

modal.addEventListener("click", function () {
  closeModal();
});

modalContent.addEventListener("click", function (event) {
  event.stopPropagation(); // 阻止冒泡到 modal
});

// 下拉菜单：点击按钮切换，点击文档关闭
const dropdown = document.querySelector(".dropdown");
const dropdownButton = dropdown.querySelector(".button");
const dropdownMenu = dropdown.querySelector(".menu");

dropdownButton.addEventListener("click", function (event) {
  event.stopPropagation();
  toggleDropdown();
});

document.addEventListener("click", function () {
  closeAllDropdowns();
});

stopImmediatePropagation() - 立即停止

stopImmediatePropagation() 不仅阻止事件传播，还会阻止同一元素上的后续监听器执行：

element.addEventListener("click", function (event) {
  console.log("第一个监听器");
  event.stopImmediatePropagation();
});

element.addEventListener("click", function () {
  console.log("第二个监听器"); // 不会执行
});

element.addEventListener("click", function () {
  console.log("第三个监听器"); // 不会执行
});

// 点击后只输出：第一个监听器

对比 stopPropagation()：

element.addEventListener("click", function (event) {
  console.log("第一个监听器");
  event.stopPropagation(); // 只阻止传播
});

element.addEventListener("click", function () {
  console.log("第二个监听器"); // 会执行
});

// 点击后输出：
// 第一个监听器
// 第二个监听器

捕获阶段的阻止

在捕获阶段也可以阻止传播：

parent.addEventListener(
  "click",
  function (event) {
    console.log("parent 捕获");
    event.stopPropagation(); // 阻止继续向下捕获
  },
  true
);

child.addEventListener("click", function () {
  console.log("child 点击"); // 不会执行
});

// 点击 child 只输出：parent 捕获

这个特性可以用来实现"全局拦截"：

// 禁用整个区域的所有点击
const disabledArea = document.querySelector(".disabled-area");

disabledArea.addEventListener(
  "click",
  function (event) {
    event.stopPropagation();
    event.preventDefault();
    showMessage("此区域已禁用");
  },
  true
); // 捕获阶段拦截

// 区域内的所有元素都无法响应点击

不冒泡的事件

并非所有事件都会冒泡。以下事件不会冒泡：

焦点事件

// ❌ 不冒泡
element.addEventListener("focus", handler);
element.addEventListener("blur", handler);

// ✅ 冒泡版本
element.addEventListener("focusin", handler);
element.addEventListener("focusout", handler);

示例：

// 使用 focusin 实现表单级别的焦点管理
const form = document.querySelector("form");

form.addEventListener("focusin", function (event) {
  console.log("表单内元素获得焦点:", event.target);
  event.target.parentElement.classList.add("focused");
});

form.addEventListener("focusout", function (event) {
  console.log("表单内元素失去焦点:", event.target);
  event.target.parentElement.classList.remove("focused");
});

鼠标进入/离开事件

// ❌ 不冒泡
element.addEventListener("mouseenter", handler);
element.addEventListener("mouseleave", handler);

// ✅ 冒泡版本
element.addEventListener("mouseover", handler);
element.addEventListener("mouseout", handler);

区别示例：

<div id="parent" style="padding: 20px; background: lightblue;">
  Parent
  <div id="child" style="padding: 10px; background: lightcoral;">Child</div>
</div>

const parent = document.getElementById("parent");

// mouseenter：只在进入 parent 时触发一次
parent.addEventListener("mouseenter", () => {
  console.log("进入 parent");
});

// mouseover：进入 parent 触发，从 child 冒泡到 parent 也会触发
parent.addEventListener("mouseover", (event) => {
  console.log("over parent, 来自:", event.target.id);
});

// 移动鼠标进入 parent，然后进入 child：
// mouseenter: 只输出一次 "进入 parent"
// mouseover: 输出 "over parent, 来自: parent" 和 "over parent, 来自: child"

资源加载事件

// 以下事件不冒泡
img.addEventListener("load", handler);
img.addEventListener("error", handler);
script.addEventListener("load", handler);

其他不冒泡的事件

• scroll
• resize（在 window 上）
• media 相关事件（如 play、pause）

捕获阶段的实际应用

虽然大部分时间都使用冒泡阶段，但捕获阶段在某些场景下很有用。

全局事件拦截

// 在捕获阶段拦截所有点击，实现"冻结"效果
const overlay = document.createElement("div");
overlay.style.position = "fixed";
overlay.style.inset = "0";
overlay.style.zIndex = "9999";
overlay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";

function freezePage() {
  document.body.appendChild(overlay);

  // 捕获阶段拦截所有交互
  overlay.addEventListener("click", handleBlockedClick, true);
  overlay.addEventListener("keydown", handleBlockedKey, true);
}

function handleBlockedClick(event) {
  event.stopPropagation();
  event.preventDefault();
  console.log("页面已冻结");
}

function handleBlockedKey(event) {
  event.stopPropagation();
  event.preventDefault();
}

function unfreezePage() {
  overlay.remove();
}

表单验证拦截

const form = document.querySelector("form");

// 在捕获阶段验证
form.addEventListener(
  "submit",
  function (event) {
    const isValid = validateForm(this);

    if (!isValid) {
      event.stopPropagation(); // 阻止其他处理器
      event.preventDefault(); // 阻止提交
      showErrors();
    }
  },
  true
); // 捕获阶段

// 这个处理器只有验证通过才会执行
form.addEventListener("submit", function (event) {
  console.log("表单验证通过，准备提交");
  submitFormViaAjax(this);
});

调试和日志

// 在捕获阶段记录所有事件
document.addEventListener(
  "click",
  function (event) {
    console.log("捕获:", {
      target: event.target.tagName,
      currentTarget: event.currentTarget,
      phase: event.eventPhase,
      timestamp: event.timeStamp,
    });
  },
  true
);

target vs currentTarget

理解 event.target 和 event.currentTarget 的区别对于使用事件委托至关重要。

<div id="outer">
  <div id="middle">
    <button id="inner">
      <span id="text">点击</span>
    </button>
  </div>
</div>

const outer = document.getElementById("outer");

outer.addEventListener("click", function (event) {
  console.log("target:", event.target.id);
  // 点击 span: "text"
  // 点击 button: "inner"
  // 点击 middle: "middle"

  console.log("currentTarget:", event.currentTarget.id);
  // 总是 "outer"（绑定监听器的元素）

  console.log("this:", this.id);
  // 总是 "outer"（与 currentTarget 相同）
});

实际应用：

// 使用 target 判断具体点击的元素
todoList.addEventListener("click", function (event) {
  const target = event.target;

  if (target.matches(".delete-btn")) {
    deleteItem(target.closest(".todo-item"));
  }
});

// 使用 currentTarget 访问监听器所在的元素
todoList.addEventListener("click", function (event) {
  console.log("列表被点击");
  console.log("列表元素:", event.currentTarget);
  console.log("实际点击:", event.target);
});

closest() 方法配合事件委托

closest() 方法向上查找最近的匹配祖先元素，与事件委托完美配合：

<div class="card">
  <div class="card-header">
    <h3>标题</h3>
    <button class="close-btn">
      <span class="icon">×</span>
    </button>
  </div>
  <div class="card-body">内容</div>
</div>

const container = document.querySelector(".container");

container.addEventListener("click", function (event) {
  // 点击关闭按钮或其内部元素
  const closeBtn = event.target.closest(".close-btn");
  if (closeBtn) {
    const card = closeBtn.closest(".card");
    card.remove();
    return;
  }

  // 点击卡片头部
  const cardHeader = event.target.closest(".card-header");
  if (cardHeader) {
    cardHeader.classList.toggle("expanded");
    return;
  }
});

事件委托的高级模式

动态添加元素

const taskList = document.querySelector(".task-list");

// 事件委托
taskList.addEventListener("click", function (event) {
  if (event.target.matches(".task-item")) {
    toggleTask(event.target);
  }
});

// 动态添加新任务，自动支持点击
function addTask(text) {
  const task = document.createElement("div");
  task.className = "task-item";
  task.textContent = text;
  taskList.appendChild(task); // 不需要绑定事件
}

addTask("新任务"); // 自动支持点击

多种交互的委托

const gallery = document.querySelector(".gallery");

// 统一的事件委托处理器
gallery.addEventListener("click", function (event) {
  const target = event.target;

  // 点击图片
  if (target.matches(".gallery-image")) {
    openLightbox(target);
  }
  // 点击删除按钮
  else if (target.matches(".delete-btn")) {
    event.stopPropagation(); // 不触发图片点击
    deleteImage(target.closest(".gallery-item"));
  }
  // 点击收藏按钮
  else if (target.matches(".favorite-btn")) {
    event.stopPropagation();
    toggleFavorite(target.closest(".gallery-item"));
  }
});

// 双击重命名
gallery.addEventListener("dblclick", function (event) {
  if (event.target.matches(".gallery-title")) {
    renameImage(event.target.closest(".gallery-item"));
  }
});

// 右键菜单
gallery.addEventListener("contextmenu", function (event) {
  if (event.target.matches(".gallery-image")) {
    event.preventDefault();
    showContextMenu(event.target, event.clientX, event.clientY);
  }
});

性能优化：节流和防抖

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 滚动事件节流
window.addEventListener(
  "scroll",
  throttle(function (event) {
    updateScrollPosition();
  }, 100)
); // 每 100ms 最多执行一次

常见陷阱与最佳实践

避免过度使用 stopPropagation

// ❌ 过度使用可能导致其他功能失效
button.addEventListener("click", function (event) {
  event.stopPropagation(); // 可能阻止分析代码、调试工具等
  handleClick();
});

// ✅ 只在必要时使用
modal.addEventListener("click", function (event) {
  if (event.target === event.currentTarget) {
    // 只在点击背景时关闭
    closeModal();
  }
});

正确区分 preventDefault 和 stopPropagation

link.addEventListener("click", function (event) {
  // preventDefault: 阻止默认行为（跳转）
  event.preventDefault();

  // stopPropagation: 阻止冒泡
  // 通常不需要同时使用
});

// 大多数情况只需要 preventDefault
form.addEventListener("submit", function (event) {
  event.preventDefault(); // 阻止表单提交
  // 不需要 stopPropagation，让事件继续冒泡
  submitFormViaAjax(this);
});

注意事件委托的匹配精度

// ❌ 可能匹配到错误的元素
list.addEventListener("click", function (event) {
  if (event.target.tagName === "LI") {
    // 如果 LI 内部还有其他元素，这个判断可能不准确
    handleItem(event.target);
  }
});

// ✅ 使用更精确的选择器
list.addEventListener("click", function (event) {
  const item = event.target.closest(".list-item");
  if (item && list.contains(item)) {
    handleItem(item);
  }
});

总结

事件冒泡和捕获是 JavaScript 事件系统的核心机制。通过本章学习，你应该掌握：

1. 事件流三阶段：捕获、目标、冒泡
2. 事件委托模式：利用冒泡减少监听器数量
3. 控制传播：stopPropagation() 和 stopImmediatePropagation()
4. target vs currentTarget：理解实际目标和当前目标的区别
5. 实际应用：动态元素处理、多种交互委托、性能优化

---