(对事件流和DOM,BOM误解,所发出的疑惑) 问题涉及 JavaScript 事件机制的核心概念。我们来系统梳理：
“事件流模型”是什么？它和‘浏览器事件模型’、‘文档事件模型’有什么关系或区别？”
实际上，“浏览器事件模型”和“文档事件模型”并不是标准术语，它们很可能是对以下两个概念的模糊表述：
- DOM 事件模型（Document Object Model Event Model）：即 W3C 标准定义的事件处理规范。
- 浏览器对事件流的具体实现：所有现代浏览器都遵循 W3C DOM 事件模型。
因此，更准确地说，我们应该讨论的是：
一、什么是 事件流模型（Event Flow Model）？
事件流描述的是：当一个事件（如点击）发生时，浏览器如何在 DOM 树中传播这个事件的顺序。
✅ W3C 标准定义的事件流包含 三个阶段：
-
捕获阶段（Capturing Phase）
- 事件从
window→document→html→body→ ... → 目标元素的父级 - 目的：允许祖先元素“提前拦截”事件
- 事件从
-
目标阶段（Target Phase）
- 事件到达实际触发的元素（即
e.target） - 此时既可视为捕获结束，也可视为冒泡开始
- 事件到达实际触发的元素（即
-
冒泡阶段（Bubbling Phase）
- 事件从目标元素 → 父元素 → ... →
body→html→document→window - 这是最常用的阶段，事件委托就依赖它
- 事件从目标元素 → 父元素 → ... →
🌰 举例：点击一个
<button>，事件会先“下潜”到 button（捕获），然后在 button 上触发（目标），再“上浮”回页面顶部（冒泡）。
二、什么是 DOM 事件模型（Event Model）？
“事件模型”指的是 如何为元素绑定事件监听器的机制，历史上有三种主要模型：
| 模型 | 名称 | 特点 | 是否支持事件流 |
|---|---|---|---|
| DOM0 级 | 原始模型 | element.onclick = fn只能绑定一个处理函数简单、兼容性好 | ❌ 不支持捕获✅ 部分浏览器以冒泡方式实现 |
| IE 事件模型 | IE 特有（已淘汰） | attachEvent()只支持冒泡 | ✅ 仅冒泡 |
| DOM2 级 | 现代标准 | addEventListener(type, handler, useCapture)可绑定多个监听器支持捕获/冒泡 | ✅ 完整支持三阶段事件流 |
🔍 关键点：
- 事件流 是“事件如何传播”的过程。
- 事件模型 是“如何注册监听器”的接口规范。
- DOM2 级事件模型 实现了 完整的事件流。
三、“浏览器事件模型” vs “文档事件模型”？——澄清误解
这两个说法并非官方术语，但可以这样理解：
| 说法 | 实际指代 | 说明 |
|---|---|---|
| 浏览器事件模型 | 浏览器对 W3C DOM 事件标准的实现 | 所有现代浏览器（Chrome、Firefox、Safari 等）都遵循 W3C DOM Level 2/3 Events 规范 |
| 文档事件模型 | DOM（文档对象模型）中的事件处理机制 | 即 W3C 定义的 EventTarget.addEventListener 等 API |
✅ 结论：
它们本质上是同一套东西 —— 浏览器实现了 W3C 定义的 DOM 事件模型，而该模型规定了 事件流 的行为。
四、如何控制事件流？
虽然不能“关闭”事件流，但可以干预：
1. 在捕获 or 冒泡阶段监听
// 捕获阶段
parent.addEventListener("click", handler, true);
// 冒泡阶段（默认）
child.addEventListener("click", handler, false); // 或省略第三个参数
2. 阻止传播
e.stopPropagation(); // 阻止继续冒泡或捕获
e.stopImmediatePropagation(); // 还阻止同元素其他监听器执行
3. 判断当前处于哪个阶段
e.eventPhase === Event.CAPTURING_PHASE; // 1
e.eventPhase === Event.AT_TARGET; // 2
e.eventPhase === Event.BUBBLING_PHASE; // 3
五、总结：核心关系图
W3C DOM 事件标准
│
├── 定义了「事件模型」→ 如何绑定监听器（addEventListener）
│
└── 定义了「事件流」→ 事件传播的三阶段（捕获 → 目标 → 冒泡）
│
└── 浏览器（Chrome/Firefox等）实现了这一标准
→ 所谓“浏览器事件模型”就是 DOM 事件模型的实现
💡 记住：
e.target始终是最初触发事件的元素e.currentTarget是当前执行回调的监听器所绑定的元素- 默认监听的是冒泡阶段，这是事件委托的基础
掌握这些，你就真正理解了 JS 事件的底层逻辑！
