用 new CustomEvent('name', { detail: data }) 创建带数据的事件，detail 是唯一标准字段；触发用 dispatchEvent(event)，监听时通过 event.detail 取值；IE 11 及以下需 polyfill 或改用事件总线。
如何用 CustomEvent 创建带数据的事件
直接用 new CustomEvent() 构造函数，第二个参数传 detail 对象即可携带任意结构的数据。注意不能直接写 new CustomEvent('my-event', { data: 'xxx' }) —— data 不是标准字段，必须用 detail。
常见错误：漏传 detail 或拼错成 details、payload，导致监听端取不到值。
-
detail可以是字符串、数字、对象、数组，甚至null或undefined - 若不需要传参，仍建议显式写
{ detail: null }，避免某些旧版 Safari 对空配置对象处理异常 - 不推荐在
detail中传 DOM 节点或函数，跨 Shadow DOM 或 iframe 时可能序列化失败
const event = new CustomEvent('user-login', {
detail: { userId: 123, token: 'abc' },
bubbles: true,
cancelable: false
});
触发自定义事件要用 dispatchEvent()，不是 trigger()
HTML 元素上没有 trigger() 方法，这是 jQuery 时代的遗留印象。原生必须调用目标元素的 dispatchEvent()，且传入的是完整事件对象（即 CustomEvent 实例）。
容易踩的坑：把字符串事件名直接传给 dispatchEvent()，比如 el.dispatchEvent('my-event') —— 这会报 TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须先创建事件实例，再 dispatch
- 触发目标可以是任何
EventTarget，包括document、window、HTMLElement，甚至自定义类（只要继承EventTarget） - 如果想冒泡到 document，确保构造时设
bubbles: true，且目标是 DOM 元素而非 window
const btn = document.querySelector('#login-btn');
btn.dispatchEvent(event); // 正确
// btn.dispatchEvent('user-login'); // 错误！
监听 CustomEvent 和普通事件写法一样，但取数据要从 event.detail
用 addEventListener() 监听时，语法和监听 click 完全一致，区别只在回调里读数据的方式：必须通过 event.detail 访问，而不是 event.data 或 event.payload。
典型错误：监听函数里直接解构 event 却忘了 detail 是一层嵌套，比如 const { userId } = event; → userId 是 undefined。
- 监听时无需指定事件类型为 "CustomEvent"，浏览器自动识别
-
event.detail的类型完全由你创建时传入决定，运行时不会校验结构 - 如果担心
detail为空，建议加可选链：event.detail?.userId
btn.addEventListener('user-login', (e) => {
console.log('登录用户ID：', e.detail.userId); // ✅
// console.log(e.userId); // ❌ undefined
});
兼容性要注意 IE 和部分老 Android WebView
CustomEvent 构造函数在 IE 11 及更早版本中不支持，会报 CustomEvent is not defined。即使现代项目也常需兼容企业内网环境中的旧 IE。
不推荐手写 polyfill 处理所有边界（如 bubbles、cancelable），简单场景下可用 document.createEvent() 回退，但仅限 DOM 元素触发。
- Chrome 26+、Firefox 11+、Safari 6+、Edge 12+ 原生支持
new CustomEvent() - IE 9–11 可用
document.createEvent('CustomEvent')+initCustomEvent()，但该 API 已废弃，且不支持detail传对象（只能传字符串） - 真正需要全兼容时，优先考虑用轻量事件总线（如
mitt）替代 DOM 自定义事件
多数新项目已放弃 IE 支持，但如果代码要跑在银行、政务等封闭系统里，别跳过这步检测。
