17370845950

JavaScript创建自定义事件需用CustomEvent构造函数实例化并传入事件名和detail数据，再用dispatchEvent触发；监听用addEventListener，支持bubbles和cancelable配置以实现冒泡与取消。

JavaScript 中创建自定义事件很简单，核心是用 CustomEvent 构造函数配合 dispatchEvent 方法触发，再用 addEventListener 监听。

创建并触发一个基础自定义事件

用 CustomEvent 实例化事件对象，传入事件名和可选的配置对象（含 detail 字段携带数据），再调用目标元素的 dispatchEvent 方法：

• const event = new CustomEvent('myEvent', { detail: { msg: 'Hello' } });
• document.dispatchEvent(event); 或 button.dispatchEvent(event);

监听自定义事件

监听方式和原生事件完全一样，用 addEventListener，事件名要和触发时一致：

• document.addEventListener('myEvent', (e) => { console.log(e.detail.msg); });
• 注意：e.detail 就是你在 CustomEvent 中传入的数据对象

让事件支持冒泡和取消默认行为

如果需要冒泡（比如子元素触发、父元素捕获），在构造时设置 bubbles: true；需要可取消则加 cancelable: true：

• new CustomEvent('save', { bubbles: true, cancelable: true, detail: { data: 'xxx' } })
• 监听中可通过 e.preventDefault() 取消，通过 e.cancelable 判断是否允许取消

在类或组件中封装自定义事件逻辑

适合用于自定义元素或模块通信。例如在类内部触发事件，外部订阅：

• this.dispatchEvent(new CustomEvent('loaded', { detail: this.data }));
• 外部：myComponent.addEventListener('loaded', e => console.log(e.detail));
• 记得确保 this 是继承自 EventTarget 的对象（如 HTMLElement 子类），否则需手动混入或用 new EventTarget()

基本上就这些。不复杂但容易忽略细节，比如漏写 detail 或忘记设置 bubbles 导致监听不到。