动态添加 javascript 个自定义事件并正确触发它们

Question

我正在尝试动态使用自定义 JavaScript 事件，但它们似乎以我不希望的方式排队。示例代码：

<html>
  <body>
    <div id="app">
      Testing
    </div>
<script>
  console.log("Sending event");
  const event = new Event('testEvent', { cancelable: true });
  document.body.querySelector('#app').dispatchEvent(event);
  console.log("Event sent");

  // now add an event handler
  console.log("Adding listener");
  document.body.querySelector('#app').addEventListener("testEvent", eventHandler());

  // now send the event again
  console.log("Sending event again");
  document.body.querySelector('#app').dispatchEvent(event);
  console.log("Event sent, done");

  function eventHandler(evt) {
    console.log("In eventHandler, got event");
  };
</script>
  </body>
</html>

这里我触发了一个自定义事件，然后添加了一个事件处理程序，然后再次触发了自定义事件。至少在 Chrome 中，事件处理程序被第一个触发器调用，即使触发器发生在在我添加事件处理程序之前。此外，事件处理程序不会被第二次调用，即使在我再次触发事件后也是如此。

我不希望第一个触发器导致调用事件处理程序。我确实希望第二个触发器能够调用它。我做错了什么？

Answer 1

您正在调用事件处理程序函数并将 return 值传递给 addEventListener，这就是它立即运行且仅运行一次的原因。相反，您应该传递函数。

document.body.querySelector('#app').addEventListener("testEvent", eventHandler);
//not document.body.querySelector('#app').addEventListener("testEvent", eventHandler());

<html>
  <body>
    <div id="app">
      Testing
    </div>
<script>
  console.log("Sending event");
  const event = new Event('testEvent', { cancelable: true });
  document.body.querySelector('#app').dispatchEvent(event);
  console.log("Event sent");

  // now add an event handler
  console.log("Adding listener");
  document.body.querySelector('#app').addEventListener("testEvent", eventHandler);

  // now send the event again
  console.log("Sending event again");
  document.body.querySelector('#app').dispatchEvent(event);
  console.log("Event sent, done");

  function eventHandler(evt) {
    console.log("In eventHandler, got event");
  };
</script>
  </body>
</html>

动态添加 javascript 个自定义事件并正确触发它们

Adding javascript custom events dynamically and having them triggered correctly

javascript

custom-events