javascript - dispatchEvent如何同步执行addEventListener的handler？

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在文件的初始执行过程中是如何执行的——导致我们red在true. 我认为处理程序在某处等待事件，当事件发生时，它们被放入宏任务队列中，这意味着它们只会在文件初始执行后被放入调用堆栈。

我可以安全地假设它dispatchEvent具有.addEventListener同步执行处理程序的独特方式吗？

还是我对处理程序的.addEventListener执行方式有误解？我认为它是异步执行的。

标签： javascript

Answer 1

我认为处理程序在某处等待事件

他们确实这样做了——但您只是碰巧立即触发了该事件，因此处理程序立即运行。

当事件发生时，它们被放入宏任务队列，这意味着它们只会在文件初始执行后被放入调用堆栈。

我不知道“文件的初始执行”是什么意思。每次调度事件时都会运行处理程序。

我是否可以安全地假设 dispatchEvent 具有同步执行 .addEventListener 处理程序的独特方式

不，这里没有发生任何奇怪的事情，这都是正常的事情。

还是我对 .addEventListener 中的处理程序的执行方式有误解？我认为它是异步执行的。

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