17370845950

自定义事件是开发者手动触发的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 才生效