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 监听，事件名与创建时一致：
立即学习“Java免费学习笔记（深入）”；
element.addEventListener('myEvent', handler) 回调函数中通过 e.detail 获取传递的数据：e.detail.id、e.detail.msg 支持捕获阶段监听：element.addEventListener('myEvent', handler, true) 记得在不需要时用 removeEventListener 清理，避免内存泄漏
一个完整小例子
按钮点击后触发自定义事件，父容器监听并打印数据：
// 创建事件const event = new CustomEvent('dataReady', { detail: { user: 'Alice', score: 95 }, bubbles: true});// 触发（比如在按钮点击里）document.getElementById('btn').addEventListener('click', () => { document.body.dispatchEvent(event);});// 监听document.body.addEventListener('dataReady', (e) => { console.log('收到数据：', e.detail); // { user: 'Alice', score: 95 }});
基本上就这些。不复杂但容易忽略细节，比如忘记传 detail 或没调用 dispatchEvent。
以上就是如何用javascript创建自定义事件_如何触发和监听？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542207.html
微信扫一扫 
支付宝扫一扫 
