🌐 一、事件是如何发生的？——事件流（Event Flow）
DOM 事件不是“瞬间”发生的，而是沿着 DOM 树经历三个阶段：
1. 捕获阶段（Capture Phase）
- 从
window→document→ ... → 目标元素的父级 - 默认不触发监听器（除非显式设置
useCapture: true） - 目的是“向下传递”事件
2. 目标阶段（Target Phase）
- 事件到达实际触发的元素（即
event.target） - 此时无论捕获还是冒泡监听器都会执行（但顺序有讲究）
3. 冒泡阶段（Bubble Phase）
- 从目标元素 → 父级 → ... →
document→window - 默认行为：
addEventListener的监听器在此阶段执行（useCapture = false）
✅ 谁先执行？
若同时注册了捕获和冒泡监听器：
parent.addEventListener('click', fn1, true); // 捕获 child.addEventListener('click', fn2, false); // 冒泡（目标阶段） parent.addEventListener('click', fn3, false); // 冒泡执行顺序：
fn1（捕获） →fn2（目标） →fn3（冒泡）
🛠 二、如何监听事件？
✅ 推荐方式：DOM Level 2 — addEventListener
element.addEventListener('click', handler, {
capture: false, // 是否在捕获阶段触发（等价于 useCapture）
once: false, // 是否只执行一次
passive: false // 是否阻止默认行为（性能优化，见下文）
});
参数说明：
| 参数 | 类型 | 说明 |
|---|---|---|
type | string | 事件类型，如 'click', 'input' |
listener | function | 回调函数，接收 event 对象 |
options / useCapture | boolean / object | 控制监听阶段和其他行为 |
⚠️ 注意：
useCapture是历史参数，现在推荐用对象形式{ capture: true }
❌ 不推荐：DOM Level 0（内联或属性赋值）
// 内联（HTML 中）
<button onclick="alert(1)">Click</button>
// JS 属性赋值
btn.onclick = function() { ... };
缺点：
- 只能绑定一个处理函数（后续赋值会覆盖）
- 难以模块化、解耦
- 无法控制捕获/冒泡阶段
🔍 三、关键概念
1. event.target vs this（或 event.currentTarget）
event.target：真正触发事件的元素（可能很深）this/event.currentTarget：当前监听器绑定的元素
<div id="parent">Parent
<span id="child">Child</span>
</div>
parent.addEventListener('click', function(e) {
console.log(e.target); // 可能是 span 或 div
console.log(this); // 一定是 #parent
console.log(e.currentTarget); // 同 this
});
💡 利用这点可实现 事件委托（Event Delegation）
2. 事件委托（Event Delegation）——解决“不能监听集合”的问题
你说“事件监听不可以在集合上”，其实可以通过监听父元素 + 判断 target 实现：
// 给 ul 绑定一次监听，处理所有 li 点击
ul.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('Clicked item:', e.target.textContent);
}
});
✅ 优势：
- 减少内存开销（只绑一个监听器）
- 动态添加的子元素自动生效
⚡ 四、性能与内存注意事项
1. 内存泄漏风险
- 如果绑定监听器后未移除，且 DOM 被移除但引用仍存在，可能导致内存泄漏。
- 尤其在 SPA（单页应用）中，组件销毁时应手动移除监听器：
function cleanup() {
element.removeEventListener('click', handler);
}
2. 避免高频事件无节制监听
- 如
scroll、resize、mousemove应配合 防抖（debounce） 或 节流（throttle）
window.addEventListener('scroll', throttle(handleScroll, 16)); // ~60fps
3. 使用 passive: true 提升滚动性能
- 对于
touchstart、wheel、scroll等事件，若不需要调用preventDefault()，设为passive: true可提升流畅度：
document.addEventListener('touchstart', handler, { passive: true });
📌 浏览器会提前知道“不会阻止默认行为”，从而优化渲染流水线。
🧩 五、常见事件类型举例
| 类别 | 事件名 |
|---|---|
| 鼠标 | click, dblclick, mousedown, mouseup, mousemove |
| 键盘 | keydown, keyup, keypress |
| 表单 | submit, input, change, focus, blur |
| 文档 | DOMContentLoaded, load, beforeunload |
| 触摸 | touchstart, touchmove, touchend |
✅ 最佳实践总结
| 建议 | 说明 |
|---|---|
✅ 用 addEventListener | 支持多监听、阶段控制、现代标准 |
| ✅ 优先使用事件委托 | 减少监听器数量，支持动态内容 |
| ✅ 及时移除监听器 | 防止内存泄漏（尤其在组件销毁时） |
| ✅ 高频事件加节流/防抖 | 避免性能瓶颈 |
✅ 滚动/触摸事件设 passive: true | 提升交互流畅度 |
| ❌ 避免 DOM0 级事件 | 不灵活、难维护 |
