CustomEvent 创建自定义事件需用 detail 字段传数据，触发用 dispatchEvent、监听用 addEventListener；推荐 EventTarget 实例作事件总线，更轻量私有；cancelable 为 true 时 preventDefault 才生效，但自定义事件默认不可取消。
如何用 CustomEvent 创建带数据的自定义事件
浏览器原生支持自定义事件，核心是 CustomEvent 构造函数。它接受两个参数：事件名（字符串）和一个可选的配置对象，其中 detail 字段用于携带任意类型的数据。
常见错误是直接传入原始值（如 new CustomEvent('load', { detail: 'ok' })），虽然能工作，但一旦需要传递对象或数组，必须确保接收方通过 event.detail 访问——不是 event.data 或 event.payload。
-
detail是唯一被规范允许携带自定义数据的字段，其他字段（如bubbles、cancelable）控制事件行为 - 若需冒泡，显式设置
{ bubbles: true }，否则默认不冒泡，父元素监听不到 - 避免在
detail中传入函数或 DOM 节点（存在内存泄漏风险），纯 JSON 可序列化结构最安全
怎么在元素上触发并监听自定义事件
触发用 dispatchEvent，监听用 addEventListener，和原生事件完全一致。关键在于目标元素要明确——不是所有元素都适合当事件总线。
例如给 document 发送事件，所有监听者都能收到；但给某个临时 div 发，就得保证它还存在于 DOM 中且未被销毁。
立即学习“Java免费学习笔记（深入）”；
- 推荐使用
document或专门创建的new EventTarget()实例作为事件中心，避免依赖 DOM 生命周期 - 监听时别漏掉
useCapture参数的含义：设为true会在捕获阶段触发，一般用false（默认）即可 - 记得在不需要时调用
removeEventListener，尤其在单页应用组件卸载时，否则容易引发内存泄漏
EventTarget 实例比 document 更适合做事件总线吗
是的。new EventTarget() 是轻量、无 DOM 依赖的事件分发器，适用于模块间通信或类内部解耦，比如一个状态管理类对外广播变更。
对比 document：它全局可见，易受其他脚本干扰；而 EventTarget 实例完全私有，生命周期可控。
-
EventTarget支持addEventListener/dispatchEvent/removeEventListener，API 一致 - 不能用
querySelector查找它，也不能绑定 CSS 样式，纯逻辑用途 - 注意：IE 不支持
EventTarget构造函数，如需兼容，可用document.createDocumentFragment()替代，或引入极简 polyfill
为什么 dispatchEvent 返回 false 却没阻止默认行为
因为 CustomEvent 默认不可取消（cancelable: false）。即使你在监听里调用 event.preventDefault()，也不会生效，dispatchEvent 仍返回 true。
只有显式设置 cancelable: true，且监听函数中调用了 preventDefault()，dispatchEvent 才可能返回 false。但这对自定义事件意义有限——它不会影响页面跳转或表单提交等原生行为。
- 不要指望靠
preventDefault()阻止业务逻辑执行，那是设计问题，应由事件处理函数内部控制流程 - 若真需要“可取消”的语义，建议用返回值或 Promise 显式表达，而非依赖事件机制
- 调试时检查
event.cancelable值，避免误判事件是否可取消
真正容易被忽略的是事件作用域和清理时机：用 EventTarget 时，没人帮你自动销毁监听器；挂到 document 上时，不同模块可能用相同事件名互相覆盖。命名加前缀（如 myapp:loaded）和按需销毁，比写对触发逻辑更关键。
