JavaScript 事件流详解：冒泡、捕获与 DOM2 规范

1. 什么是事件流？

在深入探讨事件流之前，首先需要明确“事件”的概念。

事件是指文档或浏览器窗口中发生的、具有特定意义的时刻。

它通常代表用户与页面进行的交互行为。

例如，当用户点击某个元素或将鼠标悬停在特定元素上时，都会触发相应的事件。

事件的核心作用在于实现交互。

JavaScript 与 HTML 之间的交互正是通过事件机制来完成的。

那么，什么是事件流呢？

简单来说，事件流描述了页面接收事件的顺序。

2. 事件流模型

2.1) 事件冒泡

事件冒泡是指事件从最具体的元素（即 DOM 树中的叶子节点）开始触发，然后逐级向上传播，直到不那么具体的元素（即 DOM 树的根节点）。

通过以下示例来理解这一过程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡</title>
</head>
<body>
    <div>点击</div>
</body>
</html>

当点击 <div> 元素后，会触发 click 事件；

随后，click 事件会沿着 DOM 树结构一路向上传播，在经过的每个节点依次触发，直至到达 document；

具体路径为：<div> —> <body> —> <html> —> document

可以参考下图来直观理解这一过程：

2.2) 事件捕获

与冒泡相反，事件捕获是指从最不具体的节点（即 DOM 树的根节点）最先接收到事件，而最具体的节点（即 DOM 树的叶子节点）最后接收到事件。

通过以下示例来理解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件捕获</title>
</head>
<body>
    <div>点击</div>
</body>
</html>

在点击 <div> 后，click 事件首先由 document 捕获；

随后，事件沿 DOM 树结构一路向下传播，直至到达目标元素 <div>；

具体路径为：document —> <html> —> <body> —> <div>

可以参考下图来直观理解：

基于其特点，事件捕获具有以下作用：

在事件到达最终目标之前，可以提前拦截事件。

Tips:

由于部分旧版本浏览器不支持事件捕获机制，通常建议优先使用事件冒泡。

3. DOM 事件流

根据 DOM2 Events 规范，事件流被划分为三个主要阶段：

分别是事件捕获、到达目标和事件冒泡。

事件捕获最先发生，这为提前拦截事件提供了可能性；接着，实际的目标元素接收到事件；最后进入事件冒泡阶段（这是最晚响应事件的阶段）。

通过以下示例来理解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 事件流</title>
</head>
<body>
    <div>点击</div>
</body>
</html>

点击 <div> 元素后，事件将按照图示顺序依次触发。

在 DOM 事件流中，实际的目标元素在捕获阶段通常不会接收到事件（捕获阶段从 document 到 <body> 结束）。

• 捕获阶段：document —> <html> —> <body>，对应图中的 1、2、3；
• 到达目标：即在 <div> 上触发事件，对应图中的 4（通常在事件处理中，这被视为冒泡阶段的一部分）；
• 冒泡阶段：<body> —> <html> —> document，对应图中的 5、6、7；

Tips:

尽管 DOM2 Events 规范明确指出捕获阶段不命中目标事件，但现代浏览器会在捕获阶段于事件目标上触发事件。因此，在事件目标上拥有两次处理事件的机会。

总结

本文到此结束，希望能为读者带来帮助，也欢迎继续关注本站获取更多内容！