CustomEvent detail 与 composed
先从一个浏览器可观察问题开始:同一操作为什么会改变节点、事件、请求、存储或辅助技术状态?本节把“CustomEvent detail 与 composed”拆成输入、所有者、中间状态和输出,避免只背 API。
最小实验
js
new CustomEvent('change', { bubbles: true, composed: true })运行前记录环境和输入序列;运行后记录回调顺序、对象身份、可见文本、网络/存储变化或可访问名称。再改变一个条件:取消、卸载、重复触发、权限拒绝、跨源、键盘路径或不支持该 API 的浏览器。
规则与边界
- 平台保证、浏览器实现和业务约定必须分开;一个浏览器中的结果不能自动推广到所有宿主。
- 每个监听器、请求、观察器、缓存和焦点操作都要有清理/取消责任;页面或组件离开后不能继续写状态。
- 用户输入、URL、HTML、消息和持久化数据按不同信任边界处理;类型正确不代表内容可信。
- 失败、取消、超时、权限拒绝、配额不足和不支持要有不同的可观察结果。
练习
- 写出成功、失败、取消/卸载和降级四条路径的断言。
- 改变一个时序,解释哪条因果边发生变化。
- 说明一个替代 API 何时更适合及其代价。
下一步
完成答案核对后继续本章下一篇,并把实验日志保存在自己的项目中。