为什么html的click()方法会同步运行？

Question

我发现MDN在引入dispatchEvent()时说dispatchEvent()同步运行，但没有找到像MDN或HTML Standard这样的正式文档提到html click()方法同步运行或合成事件同步运行。有人可以与我分享相关文件吗？ 我真的非常感激！

或者文档中可能有一些执行步骤解释而不是直接得出结论？我注意到 dispatchEvent() 和 click() 都会将 isTrusted 属性设置为 false，但不确定 eventListener 调用时间是否取决于此。

Answer 1

每个算法步骤都没有说“并行”, "对任务进行排队",或规范中链接到这些的任何内容都将同步执行。*

规范算法中有什么dispatch目标事件始终同步执行。它来自 EventTarget#dispatchEvent()、HTMLElement#click() 或来自实际用户启动的事件。

令人困惑的是，对于大多数情况，这个调度事件算法本身包装在对任务进行排队调用，因此实际上是在事件的发生将是异步的。

例如，当图像加载时 a>我们有

其中“排队元素任务”将调用我们的排队任务算法，而“触发事件”将调用我们的 >调度算法。

所以，是的，在这种情况下，load 事件会在图像加载实际发生后异步触发。

---

现在，如果我们回到 EventTarget#dispatchEvent() （和 HTMLElement#click( ），归根结底与很多事件构建步骤相同），我们可以看到它确实直接调用了dispatch算法，而没有排队任何新任务。

不仅同步调用该算法，它甚至将该算法的结果返回给调用者。因此该算法无法并行处理，调用者必须同步调用所有处理程序才能得到结果。

const makeEvent = (type) => new Event(type, { cancelable: true });
addEventListener("foo", (evt) => {
  console.log("foo fired");
});
console.log("return value", dispatchEvent(makeEvent("foo")));

addEventListener("bar", (evt) => {
  console.log("bar fired");
  evt.preventDefault(); // cancel the event
});
console.log("return value", dispatchEvent(makeEvent("bar")));

^{*也许还有其他情况，但我不知道这些情况，如果它们存在，那么它们肯定会足够清楚。}