為什麼html的click()方法會同步運作?
P粉170438285
P粉170438285 2024-03-19 23:15:17
0
1
360

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

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

P粉170438285
P粉170438285

全部回覆(1)
P粉344355715

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

規範演算法中有什麼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")));

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!