事件机制

浏览器中的事件连接用户操作、网络、计时器与 DOM与BOM；脚本通过注册监听器在适当时机得到通知。事件分发与 异步编程 中的任务队列同属「先登记、后响应」的协作模型。

---

DOM 事件三阶段（传统模型）

1. 捕获（capture）：从 window 向下到目标。
2. 目标（target）：到达事件目标。
3. 冒泡（bubbling）：从目标向上回传。

• addEventListener(type, handler, options)
  • capture: true → 在捕获阶段触发。
  • 默认 false → 冒泡阶段触发（多数日常写法）。

---

常用 API

• event.target：实际触发事件的元素（常与子元素点击相关）。
• event.currentTarget：当前监听器绑定的元素。
• event.preventDefault()：取消默认行为（如链接跳转、表单提交）。
• event.stopPropagation()：阻止继续传播（捕获/冒泡；不影响同元素上其它监听器，除非用 stopImmediatePropagation）。
• once: true：监听一次后自动移除。

---

委托（事件委托）

在共同祖先上监听，根据 event.target 判断真实来源，减少监听器数量，适合列表动态增删。注意 closest 等与目标过滤的配合。

---

自定义事件

const ev = new CustomEvent('app:ready', { detail: { id: 1 }, bubbles: true })
el.dispatchEvent(ev)

利于组件间解耦；detail 可传结构化数据。

---

与异步、渲染

• 事件回调与 requestAnimationFrame、Promise.then 的先后顺序涉及微任务 / 宏任务，见 异步编程。
• 频繁事件（scroll、resize、mousemove）常需防抖 / 节流，见 性能优化。

---

相关链接

• DOM与BOM（document、Element、全局 window）
• 函数（监听器中的 this、箭头函数取舍）
• 异步编程（任务与 Promise）
• 性能优化（节流、被动监听器 passive）