事件性能、安全与框架边界

滚动、pointermove 和 input 可能高频触发；先确认业务是否需要每次事件，再用节流、requestAnimationFrame 或 passive listener 减少主线程工作。性能优化不能通过丢事件或跳过清理换取数字。

let scheduled = false
window.addEventListener('scroll', () => {
  if (scheduled) return
  scheduled = true
  requestAnimationFrame(() => { scheduled = false; updateHeader() })
}, { passive: true })

框架事件系统仍建立在这些浏览器规则上。遇到“点击没反应”，先检查 DOM、默认行为、传播和清理，再检查框架渲染和组件身份。

练习

为一个无限滚动列表设计观察器、网络请求和卸载清理的责任表，并说明如何证明没有重复监听。

核心机制与实现

事件传播由捕获、目标、冒泡三个阶段组成；DOM 更新要区分节点身份、文本、属性和布局读取。

围绕“事件性能、安全与框架边界”先写出输入 → 中间状态 → 可观察结果，再实现最小闭环。不要把事件监听、异步请求、DOM 读取或 store 写入混在一个函数里；每个副作用都要有创建、完成、取消和清理路径。

const root = document.querySelector('[data-list]')
root.addEventListener('click', event => {
  const button = event.target.closest('button[data-id]')
  if (!button || !root.contains(button)) return
  root.dispatchEvent(new CustomEvent('item:remove', {
    bubbles: true, detail: { id: button.dataset.id }
  }))
})

逐步运行：先只验证成功路径，再改变一个输入；记录时间顺序、对象身份、错误类型和最终可见状态。若环境不支持某个浏览器 API，要把静态协议验证和真实浏览器验证分开记录。

失败边界与变体

• 输入为空、重复、过期或非法时，不应静默覆盖有效状态。
• 组件卸载、路由离开、标签页关闭或请求取消时，资源必须停止写入。
• 跨文档、Shadow DOM、Worker、SSR 或多标签页会改变可见边界，不能沿用单页面直觉。
• 需要持久化时记录 schema 版本和迁移失败策略；需要全局状态时先证明局部状态不足。

可运行实验与练习

用浏览器运行：点击嵌套按钮、键盘触发同一动作、移除节点后再次派发事件；记录 target、currentTarget、defaultPrevented 和节点身份。

练习要求：实现一个最小版本，补一个失败测试，再给出一个替代方案及其适用条件。答案应包括实际输入序列、观察结果、修复原因和未覆盖的浏览器差异。

查看本节答案

下一步

完成练习后打开本章答案，再回到DOM 与事件课程总览。