为什么同步代码在宏任务之后运行

Question

根据我对事件循环的理解，事件循环会将回调推送到调用堆栈中，但例如，下面的代码，同步代码console.log(2)在点击事件处理程序之后运行，这是为什么？

console.log(1)
document.body.addEventListener('click', () => {
console.log(3)
})
document.body.click()
console.log(2)

Answer 1

通过执行：

console.log(1)
document.body.addEventListener('click', () => {
console.log(3)
})
document.body.click()
console.log(2)

结果是：

1
3
2

但通过这样做：

console.log(1)
document.body.addEventListener('click', () => {
setTimeout( () => {
console.log(3)
},200);
})
document.body.click()
console.log(2)

结果是：

1
2
3

因此，我的结论是，点击事件被很好地放入堆栈中，但它会立即展开。