CustomEvent 构造函数必须用 detail 字段封装数据，其他字段无效；detail 可为任意类型，但传对象建议用 structuredClone() 预处理；需调用 dispatchEvent() 触发，监听须早于触发且事件名严格匹配；不跨 iframe；在 vue/react 中可用但需注意与框架事件系统隔离。
CustomEvent 构造函数怎么传参才有效
必须用 detail 字段封装数据，其他字段不会被自动透传。浏览器只认这个键名，哪怕你写成 data 或 payload，接收方拿到的也是 undefined。
-
detail可以是任意类型：字符串、对象、数组、数字，甚至NULL或undefined - 不要试图在构造时直接写
new CustomEvent('foo', { detail: myObj })后再修改myObj—— 事件触发时取的是快照值，不是引用 - 如果传对象，建议用结构化克隆（如
structuredClone()）预处理，避免接收方意外修改原始数据
addEventListener 中 event.detail 总是 undefined 怎么办
常见原因是没调用 dispatchEvent()，或者事件名拼错导致监听和触发不匹配。也可能是事件在监听器注册前就已触发（比如 dom 尚未 ready）。
- 检查触发代码是否真的执行了：
const evt = new CustomEvent('user-login', { detail: { id: 123, token: 'abc' } }); window.dispatchEvent(evt); // 忘了这行？ - 监听时用严格相等比对事件名：
if (e.type === 'user-login')，别依赖e.detail做判断 - 确保监听注册早于触发 —— 把
addEventListener放在DOMContentLoaded之后，或用setTimeout(..., 0)延迟触发作验证
跨 iframe 传递 CustomEvent 数据行不行
不行。默认情况下 CustomEvent 不跨 iframe 边界，即使同源也不自动透出。这是浏览器安全模型决定的，不是 API 缺陷。
- 同源 iframe 可用
iframe.contentWindow.postMessage()替代，配合message事件收发 - 若坚持用事件，需手动在 iframe 内重新 dispatch：
// 父页 iframe.contentWindow.dispatchEvent(new CustomEvent('sync', { detail: data })); // 子页需自己监听 window 并转发到 document 或自定义目标 window.addEventListener('sync', e => document.dispatchEvent(e)); - 注意
postMessage的targetOrigin参数不能写'*'（有安全风险），应明确指定源
Vue/React 里还能用原生 CustomEvent 吗
能，但要注意框架的事件系统和原生事件系统是两套机制，混用容易丢失响应链或触发时机异常。
立即学习“前端免费学习笔记（深入）”；
- 在 Vue 中，
$emit是组件内通信，CustomEvent适合跨组件边界（如插件、微前端）或与非 Vue 代码交互 - React 函数组件中，
useEffect里加监听没问题，但记得在卸载时removeEventListener，否则闭包会持有过期 state - 不要在 React 的合成事件回调里再 dispatch 同名
CustomEvent，可能引发无限循环 —— 比如点击按钮触发click，又在 handler 里发click自定义事件
细节上最容易忽略的是：事件对象本身不可写（e.detail = ... 无效），且 CustomEvent 实例一旦创建，detail 就固定了；想动态改，只能新建事件重发。