自定义事件触发后监听器没反应是怎么回事?
我在项目里用 new CustomEvent 创建了一个自定义事件,也用 addEventListener 监听了,但就是不执行回调,不知道哪里出错了?
我试过在同一个元素上先 addEventListener 再 dispatchEvent,代码大概是这样的:
const el = document.getElementById('myDiv');
el.addEventListener('myEvent', () => {
console.log('事件被触发了!');
});
const event = new CustomEvent('myEvent');
el.dispatchEvent(event);
控制台啥也没输出,难道自定义事件不能这么用?
首先确认
document.getElementById('myDiv')确实能获取到元素,要是这个返回 null 或者 undefined,后面的操作就都白搭了。加个 console.log(el) 验证一下。另外,确保事件名字符串拼写完全一致,虽然看起来没错,但大小写敏感这点容易出错。还有就是,dispatchEvent 调用时要确保是在正确的作用域里执行的。
给你个完整可运行的例子:
这代码应该可以正常工作,如果还不行,那就得看看是不是有其他地方干扰了事件流,比如某个第三方库或者框架在捣乱。有时候事件冒泡机制被阻止也会导致这种现象,不过按你说的情况看不像是这个问题。