深入理解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 规范明确指出捕获阶段不命中目标事件，但现代浏览器会在捕获阶段于事件目标上触发事件。因此，在事件目标上拥有两次处理事件的机会。

总结

本文到此结束，希望能为读者带来帮助，同时也欢迎大家关注本站以获取更多相关内容！