JavaScript中点击事件是否以异步方式处理？

我给按钮绑定了点击事件，同时写了两个函数：一个是阻塞主线程2秒的delayedForTwoSeconds，另一个是用setTimeout(0)的asyncFunc。在delayedForTwoSeconds执行期间点击按钮，输出顺序是done→button clicked→AsyncFunc。这里的困惑点在于：

• done先于button clicked输出，说明点击事件是异步处理的；
• 但点击事件回调比setTimeout(0)的回调先执行，又好像它的优先级更高，不像普通异步任务。

代码复现 #

JavaScript代码 #

document
  .querySelector("button")
  .addEventListener("click", () => console.log("button clicked"));

function delayedForTwoSeconds() {
  let now = (later = new Date());
  while (later.getSeconds() - now.getSeconds() < 2) {
    later = new Date();
  }
}

function asyncFunc() {
  setTimeout(() => console.log("AsyncFunc"), 0);
}

asyncFunc();
delayedForTwoSeconds();
console.log("done");

// 输出顺序：
// done
// button clicked
// AsyncFunc

HTML代码 #

<button>Click me</button>

复现方法：即使看不到按钮，点击按钮所在的位置即可。

核心原因：JavaScript事件循环与宏任务优先级 #

要搞懂这个顺序，得明白JS的事件循环机制和浏览器对宏任务的优先级处理：

1. 同步任务优先执行

   • 代码开始后，先同步绑定点击事件（仅注册回调，不执行）；
   • 调用asyncFunc时，setTimeout会把它的回调放到定时器宏任务队列，标记延迟0ms；
   • 接着执行delayedForTwoSeconds，这是一个同步死循环，直接阻塞主线程2秒——这期间点击按钮，浏览器会把点击事件的回调放到用户交互宏任务队列，但因为主线程被阻塞，根本没时间处理这个回调；
   • 阻塞结束后，同步执行console.log("done")，输出done。

2. 异步宏任务的优先级差异
   当所有同步任务执行完，主线程空闲，开始处理宏任务队列。浏览器会给不同类型的宏任务分配优先级：

   • 用户交互事件（点击、滚动等）的优先级高于定时器任务，所以浏览器会先取出点击事件的回调执行，输出button clicked；
   • 等点击事件回调执行完，再处理定时器队列里的任务，输出AsyncFunc。

总结 #

• 点击事件确实是异步的：它的回调不会在点击时立刻执行，必须等主线程的同步任务全部完成后才会被处理，所以done会先输出；
• 它比setTimeout(0)先执行，是因为浏览器对宏任务的优先级排序，用户交互类任务会被优先处理，不是因为它是同步任务。

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