CustomEvent 构造函数必须用 detail 字段传自定义数据，其他字段会被忽略；detail 值可为任意类型但不宜含 DOM 节点或函数；dispatchEvent 前必须 new 实例；监听时需安全访问 event.detail；派发前建议深拷贝避免引用污染。
CustomEvent 构造函数怎么传数据
必须用 detail 字段传自定义数据，其他字段会被忽略。浏览器只认这个键名，哪怕你写成 data 或 payload，触发后拿到的事件对象里也还是空的 event.detail。
实操建议：
-
detail值可以是任意类型：字符串、数字、对象、数组，甚至null或undefined（但不推荐传undefined，部分老版本 Safari 会报错） - 如果传对象，建议结构扁平，避免深层嵌套——不是语法限制，而是便于监听方快速取值，也减少序列化/克隆时的意外
- 不要在
detail里传 DOM 节点或函数，它们无法被结构化克隆，Chrome 会静默丢弃，Firefox 报DataCloneError
dispatchEvent 之前必须 new CustomEvent
不能直接 element.dispatchEvent({ type: 'my-event', detail: {...} }) —— 这会报错：Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'。浏览器要求必须是 Event 实例。
正确写法只有这一种主流路径：
const event = new CustomEvent('user-login', {
detail: { userId: 123, token: 'abc' },
bubbles: true,
cancelable: false
});
element.dispatchEvent(event);
注意：
-
bubbles: true很关键，否则事件不会冒泡到父级，监听document或window就收不到 -
cancelable: false是默认值，除非你真需要调用event.preventDefault()干预流程，否则别改 - 不要漏掉
new，写成CustomEvent(...)会返回undefined，触发时报错
监听方怎么安全读取 detail
监听时不能假设 event.detail 一定存在或有特定结构，尤其当事件可能被多次派发、来源不一时。
稳妥做法：
- 先检查
event.detail != null，再访问属性，避免Cannot read property 'xxx' of undefined - 用可选链
event.detail?.userId（现代环境）或逻辑判断event.detail && event.detail.userId（兼容旧版） - 如果业务强依赖某个字段，建议在派发前做基础校验，比如
if (!data.userId) throw new Error('missing userId')，比在监听端补救更可控
和原生事件混用要注意什么
CustomEvent 和 click、input 等原生事件共存时，容易混淆触发时机和数据流向。
典型坑点：
- 别在原生事件回调里直接派发 CustomEvent 并期望同步更新视图——DOM 渲染可能还没完成，监听方读到的可能是旧状态
- 如果要用 CustomEvent 模拟表单提交，别覆盖
submit事件本身；应该监听submit，然后手动preventDefault()再派发你的form-submit-custom - 多个监听器对同一 CustomEvent 做异步操作（如发请求）时，
detail是只读副本，但若它引用了外部可变对象，仍可能被意外修改——建议派发前用structuredClone()或浅拷贝隔离
实际中最容易被忽略的是 detail 的可变性问题：你以为传进去的是快照，但它如果是对象引用，监听方改了它，下个监听器就看到被改过的值。真要保隔离，得在 new CustomEvent 前自己深拷一份。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
