事件流模型是什么和DOM事件模型等关系

(对事件流和DOM,BOM误解,所发出的疑惑) 问题涉及 JavaScript 事件机制的核心概念。我们来系统梳理：

"事件流模型"是什么？它和'浏览器事件模型'、'文档事件模型'有什么关系或区别？"

实际上，"浏览器事件模型"和"文档事件模型"并不是标准术语，它们很可能是对以下两个概念的模糊表述：

• DOM 事件模型（Document Object Model Event Model）：即 W3C 标准定义的事件处理规范。
• 浏览器对事件流的具体实现：所有现代浏览器都遵循 W3C DOM 事件模型。

因此，更准确地说，我们应该讨论的是：

---

一、什么是 事件流模型（Event Flow Model）？

事件流 描述的是：当一个事件（如点击）发生时，浏览器如何在 DOM 树中传播这个事件的顺序。

✅ W3C 标准定义的事件流包含 三个阶段：

1. 捕获阶段（Capturing Phase）

   • 事件从 window → document → html → body → ... → 目标元素的父级
   • 目的：允许祖先元素"提前拦截"事件

2. 目标阶段（Target Phase）

   • 事件到达实际触发的元素 （即 e.target）
   • 此时既可视为捕获结束，也可视为冒泡开始

3. 冒泡阶段（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 事件的底层逻辑！