JS调用ele.click()触发事件时回调为何未进入callback queue等待执行？

你给出的代码如下：

function doSomething() { 
  const ele = document.getElementById('a');
  ele.addEventListener('click', () => {
    console.log('clicked');
  });
  console.log('before');
  ele.click();
  console.log('after');
}
doSomething()

核心成因 #

你原本对异步事件回调的执行逻辑认知是正确的：真实用户触发的页面事件、定时器、网络请求这类异步任务的回调，才会进入任务队列等待调用栈完全清空后再执行。你遇到的输出不符合预期的情况，本质是ele.click()这个API的执行逻辑是同步的：

• 当你用JS代码主动调用元素的click()方法时，浏览器会直接同步向该元素派发click事件，按顺序执行所有绑定到该元素的click事件监听器
• 只有所有click回调都执行完毕后，click()方法才会执行结束返回，继续运行后面的代码

所以实际执行顺序就是：

1. 执行console.log('before')，输出before
2. 调用ele.click()，同步执行绑定的click回调，输出clicked
3. click()方法返回，执行console.log('after')，输出after

如果你要复现你预期的输出顺序，可以把ele.click()改成用定时器包裹：setTimeout(() => ele.click(), 0)，这时候click的触发逻辑会被放入宏任务队列，等调用栈清空后才执行，输出顺序就会变成before、after、clicked。

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