为何手动调用body.click()与屏幕点击触发事件的输出结果不同？

我在浏览器控制台输入以下代码：

document.body.addEventListener("click", () => {
    Promise.resolve().then(() => console.log(1));
    console.log(2);
}, false);

document.body.addEventListener("click", () => {
    Promise.resolve().then(() => console.log(3));
    console.log(4);
}, false);

这两个事件监听器监听click事件并打印数字。

随后我执行语句：

document.body.click();

得到的结果：

2
4
1
3

但当我点击屏幕时，事件回调触发后的结果为：

2
1
4
3

请问为何手动调用body.click()与点击屏幕触发事件的输出结果存在差异？

原因解析 #

这两种触发方式的核心差异在于事件的调度模式：

1. 手动调用click()方法：

   • 这是同步触发事件的方式，所有注册的同类型事件监听器会被依次同步执行。
   • 第一个监听器执行时，先同步打印2，然后把console.log(1)放入微任务队列；接着直接执行第二个监听器，同步打印4，把console.log(3)放入微任务队列。
   • 等所有同步代码（两个监听器的同步逻辑）执行完毕后，微任务队列按顺序执行，所以先打印1再打印3，最终输出顺序是2→4→1→3。

2. 真实用户点击（浏览器原生事件触发）：

   • 浏览器原生事件的调度是基于事件循环的任务队列来处理的，每个事件监听器的执行会被包装成一个独立的任务。
   • 第一个监听器作为第一个任务执行：同步打印2，把console.log(1)放入微任务队列；当前任务执行完毕后，会先清空微任务队列，所以打印1。
   • 接着执行第二个任务（第二个监听器）：同步打印4，把console.log(3)放入微任务队列；任务执行完毕后清空微任务队列，打印3。
   • 因此最终输出顺序是2→1→4→3。

简单总结：手动调用是一次性同步跑完所有监听器的同步逻辑，再统一处理微任务；而真实点击是每个监听器作为独立任务，执行完一个任务就立刻处理该任务产生的微任务，再执行下一个监听器任务。

内容的提问来源于stack exchange，提问作者kurumi