揭秘 JavaScript 事件流：掌握事件传播机制

前端

2023-12-01 06:42:41

引言

事件是 Web 开发中必不可少的元素，它们允许我们在用户与网页交互时执行代码。了解 JavaScript 事件流至关重要，因为它控制着事件在文档中传播的方式。

理解事件流

事件流是一种事件在 HTML 文档中传播的机制。当事件发生时，它首先传播到触发事件的元素。如果该元素未处理事件，则事件将向上传播到父元素，依此类推，直到达到文档根元素。

捕获和冒泡阶段

事件流有两个主要阶段：

捕获阶段： 事件从文档根元素开始，依次向下传播到目标元素。在这个阶段，事件处理程序可以阻止事件冒泡。
冒泡阶段： 事件从目标元素开始，依次向上传播到文档根元素。在这个阶段，事件处理程序可以修改或阻止事件传播。

事件侦听器

我们可以使用 addEventListener() 方法向元素添加事件侦听器，该方法有三个参数：

事件类型： 要监听的事件类型，例如 "click" 或 "mouseenter"。
事件处理程序： 当事件发生时调用的函数。
布尔值： 指示事件处理程序是否在捕获阶段或冒泡阶段调用。

实用示例

考虑以下 HTML 代码：

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

JavaScript 代码如下：

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

// 捕获阶段事件处理程序
parent.addEventListener("click", (e) => {
  console.log("捕获阶段：父元素");
}, true);

// 冒泡阶段事件处理程序
child.addEventListener("click", (e) => {
  console.log("冒泡阶段：子元素");
}, false);