如何用javascript创建自定义事件_如何触发和监听？

JavaScript创建自定义事件需用CustomEvent构造函数（可带detail数据）、dispatchEvent触发（支持元素或document广播）、addEventListener监听（通过e.detail获取数据），注意冒泡、取消及内存泄漏。

JavaScript 中创建和使用自定义事件很简单，核心是 CustomEvent 构造函数 + dispatchEvent 触发 + addEventListener 监听。

创建自定义事件

用 CustomEvent 构造函数创建事件对象，可传入事件名和配置对象，其中 detail 字段用来携带任意数据：

• new CustomEvent('myEvent', { detail: { id: 123, msg: 'hello' } })
• detail 可以是字符串、数字、对象、数组，甚至函数（注意跨 iframe 时函数会丢失）
• 如果不需要传参，可省略配置对象：new CustomEvent('myEvent')

触发自定义事件

调用目标元素（或 document、window）的 dispatchEvent 方法：

• element.dispatchEvent(event) —— 元素上触发
• document.dispatchEvent(event) —— 全局广播（适合跨组件通信）
• 事件会按 DOM 冒泡规则向上冒泡（除非设置 bubbles: false）
• 默认不取消冒泡，也不可被阻止（除非显式设置 cancelable: true）

监听自定义事件

用标准的 addEventListener 监听，事件名与创建时一致：

标签： javascript java 回调函数 ai win