自定义事件是开发者手动触发的DOM事件，用于组件间解耦通信；通过CustomEvent构造函数创建并携带data，用dispatchEvent触发，addEventListener监听，需注意冒泡、取消及兼容性。
自定义事件是开发者自己定义、手动触发的 DOM 事件，不是浏览器自动产生的（比如 click 或 input）。它主要用于组件间解耦通信，比如子组件通知父组件状态变化，或模块之间传递数据。
怎么创建自定义事件
推荐使用 CustomEvent 构造函数，它支持携带数据：
-
基本写法：
new CustomEvent('eventName')，只传事件名 -
带数据和配置：
new CustomEvent('dataLoaded', { detail: { id: 1, name: 'Alice' }, bubbles: true, cancelable: false }) -
detail字段可放任意类型数据（对象、数组、字符串、数字），监听时通过e.detail获取 -
bubbles: true表示事件会向上冒泡；cancelable: true才能调用e.preventDefault()
怎么触发自定义事件
调用目标元素（或 document、window）的 dispatchEvent() 方法：
-
button.dispatchEvent(myEvent)—— 在特定元素上触发 -
document.dispatchEvent(myEvent)—— 全局广播，适合跨区域通信 - 触发前确保事件对象已创建，且监听器已注册（顺序无关，但建议先监听再触发）
怎么监听自定义事件
和监听原生事件一样，用 addEventListener：
element.addEventListener('dataLoaded', e => console.log(e.detail))- 回调参数
e是事件对象，e.detail就是创建时传入的数据 - 支持捕获阶段：
element.addEventListener('dataLoaded', handler, true) - 记得在不需要时调用
removeEventListener，避免内存泄漏
注意兼容性与细节
CustomEvent 在现代浏览器中完全支持（IE11+），旧版 IE 需回退到 createEvent + initEvent，但已不推荐。实际开发中只需关注三点：
- 事件名尽量语义化、避免和原生事件冲突（如不用
submit、change） - 如果要传函数或复杂对象，注意跨 iframe 时
detail中的函数会被丢弃 - 默认不冒泡、不可取消，需显式设置
bubbles和cancelable才生效
