DOM事件流模型描述了浏览器中事件传播的完整路径，包含以下核心机制：
一、事件传播三阶段
1.捕获阶段（Capture Phase）
事件从window对象开始，沿DOM树自上而下传播至目标元素的父节点（不包含目标元素）。此阶段用于提前拦截事件（如权限校验）。
element.addEventListener('click', handler, true); // 第三个参数true启用捕获
2.目标阶段（Target Phase）
事件到达触发的目标元素（如被点击的按钮），执行绑定在该元素上的事件处理函数。
3.冒泡阶段（Bubbling Phase）
事件从目标元素自下而上传播至window对象。默认事件绑定（如onclick）在此阶段触发。
element.addEventListener('click', handler); // 默认冒泡阶段
完整流程示例：点击<div>时传播路径：
window → document → html → body → div（目标）→ body → html → document → window
二、关键控制机制
1.阻止事件传播
-
event.stopPropagation()：阻止事件继续捕获或冒泡
-
event.stopImmediatePropagation()：阻止当前元素后续所有监听器执行
2.事件委托（Event Delegation）
利用冒泡机制，在父元素绑定事件处理子元素逻辑，减少内存占用：
parent.addEventListener('click', (e) => {
if (e.target.matches('.child')) {
console.log('子元素被点击');
}
});
三、浏览器兼容性差异
| 特性 | 现代浏览器 | 旧版IE（≤8） |
|---|---|---|
| 事件绑定 | addEventListener | attachEvent |
| 捕获阶段支持 | ✅ | ❌ |
| 事件对象获取 | event | window.event |
| 阻止冒泡 | event.stopPropagation() | event.cancelBubble=true |
四、DOM事件级别对比
| 级别 | 绑定方式 | 特点 |
|---|---|---|
| DOM0 | element.onclick=function | 同一事件仅能绑定一个处理函数 |
| DOM2 | addEventListener | 支持捕获/冒泡、多函数绑定 |
| DOM3 | 新增事件类型（如scroll、keyup） | 扩展更多交互事件 |
注意事项：
-
文本节点在W3C标准下可触发事件（IE除外）
-
目标阶段的事件处理函数同时存在于捕获和冒泡阶段（按注册顺序执行）
流程图解事件流：
graph LR
A[捕获阶段：Window→Document→…→目标父元素] --> B[目标阶段：目标元素]
B --> C[冒泡阶段：目标父元素→…→Window]
