JavaScript自定义事件通信核心是CustomEvent+dispatchEvent+addEventListener，推荐封装事件总线（Map存储、支持on/once/off/emit），组件销毁时需解绑防泄漏；跨层级优先用props/context/store，仅插件或微前端等解耦场景用事件；命名加前缀、检查元素存在、记录source/timestamp提升健壮性。
JavaScript 创建自定义事件和实现跨组件/模块的事件通信，核心是利用 CustomEvent 构造函数 + dispatchEvent 触发 + addEventListener 监听。关键不在于“能不能”，而在于“怎么设计得清晰、可控、不泄漏”。
用 CustomEvent 创建可传参的自定义事件
原生事件对象只支持字符串类型事件名，但 CustomEvent 允许你附带任意结构的数据（比如对象、数组），还能控制是否冒泡、是否可取消：
- 创建事件：
new CustomEvent('user-login', { detail: { id: 123, name: 'Alice' }, bubbles: false, cancelable: true }) - 触发事件：
element.dispatchEvent(event)（可作用于任意 DOM 节点，包括 document 或自定义容器） - 监听时，
event.detail就是你传入的数据，无需额外解析
事件通信推荐用“事件总线”模式（轻量级）
避免直接依赖全局 window 或 document，也别让组件互相持有引用。一个干净的做法是封装一个独立的事件总线对象：
- 用
Map存储事件名 → 回调列表，支持多次监听同一事件 - 提供
on(type, handler)、once(type, handler)、off(type, handler)、emit(type, detail) - 在组件销毁（如 Vue 的 beforeUnmount、React useEffect cleanup）时记得
off，防止内存泄漏
跨层级通信：优先考虑 props / context / store，事件只是补充
DOM 事件天然支持冒泡，但滥用 dispatchEvent 到 document 容易造成“全局污染”和调试困难：
立即学习“Java免费学习笔记（深入）”；
- 父子通信：用 props + 回调函数最直接；Vue 用
$emit，React 用onXxx属性 - 深层嵌套或兄弟组件：用 Context（React）、provide/inject（Vue）、或 Zustand/Pinia 等状态库更可控
- 仅当需要解耦“触发方”和“响应方”的生命周期（比如插件系统、微前端子应用间通知）时，才用自定义事件作为桥梁
调试和健壮性技巧
事件通信看不见摸不着，容易出错。几个实用习惯：
- 事件名统一加命名空间前缀，比如
myapp:user-login、plugin:export-ready，减少冲突 - 监听前先检查目标元素是否存在（尤其动态渲染内容），避免
addEventListener报错 - 在
detail中加入timestamp或source字段，便于追踪事件来源和时序 - 不用
document.addEventListener('xxx')做常规业务通信——它太宽泛，难维护
不复杂但容易忽略：事件通信不是越多越好，而是越少、越明确、越有边界越好。
