所属板块：6. DOM/BOM 与宿主环境机制
记录日期：2026-03-xx
更新：遇到事件委托或事件流相关题时补充
1. DOM 事件流（Event Flow）：事件传播的三个阶段
浏览器处理事件时，事件会按照固定的路径传播，这个路径称为事件流，共分为三个阶段：
-
捕获阶段（Capture Phase）
事件从window开始，一层层向下传播到目标元素（由外向内）。 -
目标阶段（Target Phase）
事件到达真正被点击/触发的目标元素。 -
冒泡阶段（Bubbling Phase）
事件从目标元素开始，一层层向上冒泡到window（由内向外）。
关键 API：
element.addEventListener(type, listener, useCapture);
// useCapture 默认 false → 冒泡阶段触发
// 设为 true → 捕获阶段触发
2. 事件委托（Event Delegation）——性能优化利器
原理：利用事件冒泡机制，把子元素的事件监听器绑定在父/祖先元素上。
// 传统写法（为每个 li 绑定，性能差）
liList.forEach(li => li.addEventListener('click', handleClick));
// 事件委托写法（推荐）
ul.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') { // 或 e.target.matches('li')
console.log('点击了', e.target.textContent);
}
});
优势：
- 大幅减少事件监听器数量，节省内存
- 动态新增的子元素无需重新绑定事件
- 代码更简洁
区分关键：
e.target：真正触发事件的元素（最内层）e.currentTarget：绑定监听器的元素（当前处理者）
3. 阻止默认行为与阻止传播
// 阻止默认行为（例如阻止 a 标签跳转、表单提交）
e.preventDefault();
// 阻止事件继续传播（捕获或冒泡阶段）
e.stopPropagation();
// 阻止当前元素上其他同类型监听器执行 + 阻止传播
e.stopImmediatePropagation();
4. 小结 & 复习时的“事件视角”
- 事件流 = 捕获 → 目标 → 冒泡（默认在冒泡阶段处理）
- 事件委托是“用冒泡省内存”的经典技巧
- [6-1] 的渲染机制 + 本文的事件模型，共同构成了浏览器与用户交互的核心底层
下一篇文章会进入 [6-3]：BOM API 与浏览器存储（window、location、history、Cookie/LocalStorage/SessionStorage 等）。
返回总目录：戳这里
