用 CustomEvent 的 detail 字段传复杂数据最直接可靠，支持对象、数组等任意结构，需避免 DOM 节点和循环引用；应绑定到合适目标元素并开启 bubbles；监听时须校验 detail 类型与结构；事件命名推荐“域+动作”格式。
用 CustomEvent 的 detail 字段传复杂数据最直接可靠，不需要额外库，浏览器原生支持。
用 CustomEvent 包装任意结构的数据
CustomEvent 是专为携带数据设计的构造函数，它的 detail 属性可以是对象、数组、嵌套结构甚至函数（注意序列化限制）。相比基础 Event，它天然支持业务语义化传参。
- 数据可以是深层嵌套的对象：
{ user: { id: 1, profile: { name: 'Alice', settings: { theme: 'dark' } } }, timestamp: 1727744220000 } - 也可以是数组或混合类型：
{ items: [{id: 1, qty: 2}], action: 'add', source: 'cart' } - 避免传 DOM 节点、函数或循环引用对象——这些无法被克隆，监听时可能丢失或报错
分发时选对目标元素，确保监听能收到
事件必须派发到某个 DOM 元素上，监听器也要绑定在相同或其祖先元素上。常用策略：
- 绑定在
document上：全局可监听，适合跨区域业务事件，如'user:login'、'order:completed' - 绑定在组件根容器上：更精准，避免污染全局，适合模块内通信，例如购物车组件监听
'cart:item-added' - 开启
bubbles: true：让事件向上冒泡，方便父级统一捕获，但注意别干扰其他逻辑
监听时安全读取 detail，并做必要校验
监听回调中不能假设 e.detail 一定存在或结构正确，尤其在多人协作或异步场景下。
立即学习“Java免费学习笔记（深入）”；
- 始终检查
e.detail是否为对象：if (e.detail && typeof e.detail === 'object') - 用可选链或默认值访问深层字段：
e.detail?.user?.id ?? null或(e.detail || {}).items || [] - 对关键字段做类型判断，比如
Array.isArray(e.detail.items)，防止运行时报错
结合业务命名，让事件本身表达意图
事件名不是技术标识，而是业务信号。清晰的命名能减少沟通成本，也利于调试和日志追踪。
- 推荐用域+动作格式：
'payment:success'、'filter:applied'、'profile:updated' - 避免泛化名称如
'dataChange'或'update'，难以定位具体上下文 - 大小写和分隔符保持项目统一，建议全小写 + 冒号/中划线分隔
