JavaScript 事件传播机制简析

前端

2023-12-06 17:29:30

深入探索 JavaScript 事件传播机制

简介

JavaScript 的事件驱动编程模型是其交互式 Web 开发功能的核心。事件通过与 HTML 元素的交互触发，并且事件传播机制规定了这些事件在文档中传播的方式。理解事件传播对于编写高效且响应迅速的 JavaScript 代码至关重要。

事件传播机制

当事件发生时，它会触发一个从事件源（目标元素）到文档其他部分的事件处理过程。JavaScript 提供了两种事件传播方式：

1. 事件冒泡

事件冒泡是默认的事件传播方式。在这种机制下，事件从事件源开始向上传播 DOM 树，直到到达根元素 (<html>)。途中，它会触发每个节点（元素）上绑定的事件监听器。

示例：

<div id="container">
  <button id="button">点击我</button>
</div>

// 在按钮上绑定 click 事件监听器
const button = document.getElementById("button");
button.addEventListener("click", () => {
  console.log("按钮被点击了");
});

// 在容器上绑定 click 事件监听器
const container = document.getElementById("container");
container.addEventListener("click", () => {
  console.log("容器被点击了");
});

// 当点击按钮时，以下输出将打印到控制台：
// "按钮被点击了"
// "容器被点击了"

2. 事件捕获

事件捕获与事件冒泡相反。它从根元素开始向下传播 DOM 树，直到到达事件源。途中，它也会触发每个节点上的事件监听器。

示例：

// 同上

// 使用 capture: true 在容器上绑定 click 事件监听器，启用事件捕获
container.addEventListener("click", () => {
  console.log("容器被捕获到了");
}, true);

// 当点击按钮时，以下输出将打印到控制台：
// "容器被捕获到了"
// "按钮被点击了"

进阶知识

1. 停止传播

stopPropagation() 方法可用于阻止事件的进一步传播。它在事件监听器中调用，可阻止事件沿传播路径继续触发其他事件监听器。

示例：

// 在按钮上绑定 click 事件监听器并阻止传播
button.addEventListener("click", (e) => {
  console.log("按钮被点击了");
  e.stopPropagation(); // 阻止事件冒泡
});

2. 事件代理

事件代理是一种性能优化技术，它允许在父元素上绑定事件监听器，以便在其子元素上触发事件时触发该事件监听器。这消除了为每个子元素绑定单独事件监听器的需要。

示例：

<ul id="list">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

// 在列表上绑定 click 事件监听器，使用事件代理
const list = document.getElementById("list");
list.addEventListener("click", (e) => {
  // 从 e.target 获取触发事件的子元素
  const target = e.target;
  if (target.nodeName === "LI") {
    console.log(`列表项 ${target.textContent} 被点击了`);
  }
});