為什麼html的click()方法會同步運作？

Question

我發現MDN在引入dispatchEvent()時說dispatchEvent()同步運行，但沒有找到像MDN或HTML Standard這樣的正式文件提到html click()方法同步運作或合成事件同步運作。有人可以跟我分享相關文件嗎？ 我真的非常感激！

或是文件中可能有一些執行步驟解釋而不是直接得出結論？我注意到dispatchEvent() 和click() 都會將isTrusted 屬性設為false，但不確定eventListener 呼叫時間是否取決於此。

Answer 1

每個演算法步驟都沒有說「並行」, "對任務進行排隊",或規範中連結到這些的任何內容都將同步執行。 *

規範演算法中有什麼dispatch目標事件總是同步執行。它來自 EventTarget#dispatchEvent()、HTMLElement#click() 或來自實際使用者啟動的事件。

令人困惑的是，對於大多數情況，這個調度事件演算法本身包裝在對任務進行排隊調用，因此實際上是在事件的發生將是異步的。

例如，當圖片載入時我們有

其中「排隊元素任務」將呼叫我們的排隊任務演算法，而「觸發事件」將呼叫我們的 >調度演算法。

所以，是的，在這種情況下，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")));

^{*也許還有其他情況，但我不知道這些情況，如果它們存在，那麼它們肯定會足夠清楚。}