DOM 与事件系统知识手札

本手札从节点身份、事件路径和输入时序开始，连接观察器、手势、性能与清理责任。 每篇都要求先运行最小例子，再改变输入、时序、宿主或失败条件。

阅读起点

前置：HTML、CSS、JavaScript 函数/模块/Promise 和浏览器 DevTools。第一次学习按下面章节顺序阅读；已有框架经验也应回到对应平台实验核对行为。

全书顺序

第1章：DOM 树、查询与安全变更。 本章从“DOM 树、查询与安全变更”开始，经过可观察实验和失败变体，建立到“textContent、attributes 与 HTML 边界”的连续因果链。

1. DOM 树、查询与安全变更
2. 节点身份、clone 与 replace
3. querySelector、closest 与静态边界
4. textContent、attributes 与 HTML 边界

第2章：事件传播、默认行为与委托。 本章从“捕获、目标与冒泡顺序”开始，经过可观察实验和失败变体，建立到“事件传播、默认行为与委托”的连续因果链。

1. 捕获、目标与冒泡顺序
2. preventDefault 与 stopPropagation
3. 事件委托与动态节点
4. 事件传播、默认行为与委托

第3章：表单输入、观察器与生命周期。 本章从“submit、FormData 与校验”开始，经过可观察实验和失败变体，建立到“Observer 回调与断开”的连续因果链。

1. submit、FormData 与校验
2. 表单输入、观察器与生命周期
3. input、change 与 composition
4. Observer 回调与断开

第4章：事件性能、安全与框架边界。 本章从“passive listener 与滚动”开始，经过可观察实验和失败变体，建立到“AbortSignal 统一清理”的连续因果链。

1. passive listener 与滚动
2. 事件性能、安全与框架边界
3. requestAnimationFrame 与批量写入
4. AbortSignal 统一清理

第5章：输入法、表单约束与提交。 本章从“composition 与 input 时序”开始，经过可观察实验和失败变体，建立到“beforeinput 与可编辑区域”的连续因果链。

1. composition 与 input 时序
2. Constraint Validation API
3. formdata、submit 与 FormData
4. beforeinput 与可编辑区域

第6章：Mutation、Intersection 与 Resize Observer。 本章从“IntersectionObserver 与懒加载”开始，经过可观察实验和失败变体，建立到“ResizeObserver 与容器布局”的连续因果链。

1. IntersectionObserver 与懒加载
2. MutationObserver 批处理
3. Observer 生命周期与断开
4. ResizeObserver 与容器布局

第7章：Pointer、键盘与手势。 本章从“拖放与数据传输”开始，经过可观察实验和失败变体，建立到“Pointer Events 与 capture”的连续因果链。

1. 拖放与数据传输
2. 触摸手势与默认滚动
3. 键盘语义与按键重复
4. Pointer Events 与 capture

第8章：DOM 性能、安全与框架边界。 本章从“监听器身份与资源清理”开始，经过可观察实验和失败变体，建立到“框架事件与原生事件”的连续因果链。

1. 监听器身份与资源清理
2. 委托边界与动态节点
3. 文本、HTML 与 URL 安全
4. 框架事件与原生事件

深入阅读

从平台输入追到最终状态

遇到“页面没有更新、请求结果过期或交互重复”时，先回到对应章节的输入、事件路径和资源所有权，再沿实验日志确认是哪一步改变了状态。不要先用框架重写来掩盖平台边界。

从正常路径追到失败恢复

把取消、权限拒绝、卸载、离线、配额不足、浏览器不支持和辅助技术差异分别运行；每种失败都应有可观察反馈和降级策略。

从平台能力连接到 Vue 与 React

完成本手札后，再回到 Vue 学习路线 或 React 学习路线，比较框架如何包装事件、更新、Effect、表单、组件和服务端边界。

例子和练习怎样使用

先记录环境、输入序列、预期结果，再运行代码；随后只改变一个条件。正文中的练习要求写出成功、失败、取消/卸载和降级断言，答案集中在本章答案页。真实浏览器、权限、读屏、触摸、跨源、Worker 和 Service Worker 行为不能用 Node 语法检查代替。

开始阅读：第一章