必须用 CustomEvent 构造函数传参，其 detail 字段携带任意数据，需手动 dispatchEvent 触发；new Event 无 detail 属性，无法传参；框架中应优先使用 $emit 或 props 回调，原生事件仅适用于 Web Component 等特定场景。
怎样用 CustomEvent 创建可传参的自定义事件
直接用 CustomEvent 构造函数是最常用也最推荐的方式，它支持传入 detail 携带任意数据，且能被 addEventListener 正常捕获。
关键点：必须手动调用 dispatchEvent 才会真正触发，构造完不 dispatch 就等于没发生。
示例：
const event = new CustomEvent('user-login', {
detail: { userId: 123, token: 'abc' },
bubbles: true,
cancelable: false
});
element.dispatchEvent(event);
-
bubbles: true决定事件能否冒泡，多数自定义场景需要设为true，否则父元素监听不到 -
cancelable: false表示不能被event.preventDefault()阻止，除非你明确需要拦截逻辑，否则别开 -
detail是唯一标准字段，用于传参；不要试图往里面塞 DOM 节点或函数（序列化时会丢失）
为什么 new Event() 不能传数据
new Event('my-event') 创建的是基础事件对象，它没有 detail 属性，event.detail 会是 undefined。强行在 detail 上赋值无效，因为该属性不可写。
立即学习“Java免费学习笔记（深入）”；
常见错误现象：addEventListener 里取 event.detail 总是 undefined，但控制台看事件对象又像有值——其实是开发者误写了属性名，或用了 new Event 却当成 CustomEvent 用。
- 如果只需要通知、不传数据，
new Event更轻量，适合开关类信号（如'loading-start'） - 只要涉及参数传递，必须用
CustomEvent，别省那几字符 - IE 不支持
CustomEvent构造函数（需 polyfill 或用document.createEvent回退）
如何在 Vue/React 等框架中安全使用自定义事件
框架组件默认不自动转发原生自定义事件，尤其是跨组件通信时容易失效。比如在 Vue 的子组件里 dispatchEvent，父组件用 @user-login 是收不到的——除非事件发生在组件根元素上，且没被框架事件系统拦截。
更可靠的做法：
- Vue 2/3 推荐用
$emit替代原生自定义事件做组件通信 - React 中应优先用 props 回调或 Context，原生事件只用于与非 React DOM 交互（如第三方地图库）
- 若必须用原生事件（如封装 Web Component），确保
dispatchEvent目标是真实 DOM 节点，而非框架虚拟节点
监听时怎么区分原生事件和自定义事件
不能靠事件名判断，而要看 event instanceof CustomEvent。有些框架（如 Angular）会包装事件对象，导致 instanceof 失效，此时可检查 event.detail !== undefined 作为辅助判断。
注意兼容性陷阱：
- Safari 旧版本对
CustomEvent的detail支持不稳定，建议避免传复杂嵌套对象，优先用扁平结构 - 用
addEventListener监听时，别漏掉useCapture参数的含义：自定义事件默认不走捕获阶段，除非显式设为true - 移除监听一定要用同一个函数引用，匿名函数会导致无法
removeEventListener
