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 中处理程序的执行方式有误解？ 我认为它是异步执行的。

处理程序同步执行。 每当调度事件时，都会检查处理程序，并按照添加顺序同步执行任何匹配的处理程序。