表单输入、观察器与生命周期

表单事件要区分 input（值持续变化）和 change（提交或失焦后的确认）。异步校验需要取消旧请求或用版本号忽略旧结果。MutationObserver、IntersectionObserver 等观察器也属于资源，连接与断开必须成对。

const observer = new IntersectionObserver(entries => {
  if (entries.some(entry => entry.isIntersecting)) loadMore()
})
observer.observe(sentinel)
// 页面卸载或组件销毁时：observer.disconnect()

练习

为邮箱输入做 debounce 校验：输入变化只保留最后一次请求，元素移除后不再更新错误提示。

核心机制与实现

事件传播由捕获、目标、冒泡三个阶段组成；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 与事件课程总览。