dispatchEvent 如何同步執行 addEventListener 的處理程序？

Question

 let section = document.querySelector('section'); function handler(e) { console.log(e.detail.color); } section.addEventListener('hello', handler); let event = new CustomEvent("hello", {detail: {color: "red"}}); if (section.dispatchEvent(event)) { console.log("true") } else { console.log("false"); }

 <section></section>

在這個例子中，我正在努力理解在文件的初始執行期間handler是如何執行的 - 導致我們在true之前記錄red 。 我認為處理程序在某處等待事件，當事件發生時，它們被放入宏任務隊列，這意味着它們只會在文件初始執行后放入調用堆棧。

我可以安全地假設dispatchEvent有一種獨特的方式來同步執行.addEventListener的處理程序嗎？

還是我對.addEventListener處理程序的執行方式有誤解？ 我認為它是異步執行的。

Answer 1

我以為處理程序在某處等待事件

他們這樣做 - 但你碰巧立即觸發事件，所以處理程序立即運行。

當事件發生時，它們被放入宏任務隊列，這意味着它們只會在文件初始執行后被放入調用堆棧。

我不知道“文件的初始執行”是什么意思。 每當調度事件時都會運行處理程序。

我可以安全地假設 dispatchEvent 有一種獨特的方式來同步執行 .addEventListener 的處理程序

不，這里沒有發生任何奇怪的事情，這都是正常的事情。

還是我對 .addEventListener 中處理程序的執行方式有誤解？ 我認為它是異步執行的。

處理程序同步執行。 每當調度事件時，都會檢查處理程序，並按照添加順序同步執行任何匹配的處理程序。