为什么JS事件或CustomEvent在初始页面加载后第一次点击时没有触发

Question

我试图弄清楚为什么JS事件在页面加载后第一次没有触发。

以下是重现场景的简单方法

HTML

<button onclick="dispatch()">Test event</button>

JS

function dispatch() {
console.log('event');
const eventTest = new Event('navbar:test');

window.dispatchEvent(eventTest);

window.addEventListener('navbar:test', (e) => {
console.log('event was sent: ', e);
}) 

}

codepen 上的实时演示

有人能解释一下这种行为的原因吗？有没有一种方法可以避免这种情况，让事件监听器在第一次点击时收到使用vanillaJS的东西？

Answer 1

在为该事件实际添加事件侦听器之前，您正在调度navbar:test事件。看起来您可能期望dispatchEvent()异步触发事件，但事实并非如此。文件上写着：

在指定的EventTarget调度事件(同步(以适当的顺序调用受影响的EventListener。

因此，只需在调度事件之前注册事件侦听器：

window.addEventListener('navbar:test', (e) => {
console.log('event was sent: ', e);
}) 

window.dispatchEvent(eventTest);

作为旁注，请注意，按照当前构建代码的方式，每次单击按钮时都会为navbar:test添加一个新的事件侦听器——这真的是您想要的吗？

Answer 2

问题正在冒泡。当您将事件添加到window时，它会阻止window中的其他事件。创建自定义事件时，应添加选项bubbles: true。

像这里

const eventTest = new Event('navbar:test', { bubbles: true });

*当您在脚本加载之前触摸按钮，并且函数dispatch已保存到window对象中时，有时也会出现问题