为什么 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);
  }) 
  
}

Live demo on codepen

有人可以解释一下 为什么 这种行为吗？有没有办法避免这种情况，以便在第一次单击时事件侦听器使用普通 JS 接收到一些东西？

Answer 1

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

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

* 在加载脚本和函数 dispatch 保存到 window 对象

之前触摸按钮有时也会出现问题

Answer 2

您在实际为该事件添加事件侦听器之前分派 navbar:test 事件。看起来您可能希望 dispatchEvent() 异步触发事件，但事实并非如此。文档是这样说的：

Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order.

所以在派发事件之前只需注册事件侦听器：

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

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

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

Why the JS Event or CustomEvent doest not fire the first time on click after initial page load?

html

javascript

events