[!info] related notes

• 所属 MOC: javascript-in-browser-moc, javascript-moc
• 上位主题: javascript-in-browser
• 相邻主题: javascript-dom, javascript-bom, window-object, this-keyword
• 性能优化: debounce-and-throttle
• 调度关联: js事件循环, js-event-loop

JavaScript 事件系统

浏览器中的事件系统负责把用户动作、浏览器状态变化和宿主回调，转换成 JavaScript 可以订阅和响应的信号。

先抓住四个词

• 事件源: 谁触发了事件
• 监听器: 哪个函数在响应事件
• 事件对象: 这次事件携带了什么信息
• 事件流: 事件如何在节点间传播

DOM 事件流

标准事件流分三段：

1. 捕获阶段
2. 到达目标
3. 冒泡阶段

这也是事件委托成立的前提。

继续拆开看：

• frontend-event-propagation - 事件传播、传播控制与事件委托
• frontend-event-bubbling - 只聚焦冒泡阶段
• add-event-listener - 监听注册 API 与选项

最常见的事件家族

• 鼠标与指针: click、mousedown、mousemove
• 键盘与输入: keydown、keyup、input、change
• 焦点: focus、blur
• 窗口与页面: load、beforeunload、resize、scroll

事件对象里最常看的字段

• type: 事件类型
• target: 实际触发源
• currentTarget: 当前正在处理监听器的对象
• preventDefault(): 阻止默认行为
• stopPropagation(): 阻止继续传播

最有价值的实践模式

事件委托

把监听器挂在父元素上，利用冒泡统一处理子元素事件，能减少监听器数量，也更适合动态列表。

明确监听选项

• capture: 是否在捕获阶段处理
• once: 是否只执行一次
• passive: 是否承诺不调用 preventDefault()

边界提醒

• 事件系统依附于浏览器宿主，不属于 ECMAScript 语法本体
• 事件触发后的回调调度要放回事件循环理解，见 js事件循环
• DOM 节点事件只是浏览器事件的一部分，window、document、history 等对象也能参与