DOM事件流模型

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]