HTMLElement.click()的回调触发踩坑

先看看以下代码

const el = document.getElementById("btn")
el.addEventListener("click", () => {
  Promise.resolve().then(() => console.log("microtask 1"));
  console.log("1");
});
el.addEventListener("click", () => {
  Promise.resolve().then(() => console.log("microtask 2"));
  console.log("2");
});

点击按钮后，分别进入两个回调，进入第一个回调时，先加到微任务，然后打印 1。
每个宏任务之间会先清空所有微任务，因此打印顺序是 1- 》 microtask1- 》 2-》 microtask2。

那如果按钮点击不是用户触发，而是代码触发呢？

const el = document.getElementById("btn")
el.addEventListener("click", () => {
  Promise.resolve().then(() => console.log("microtask 1"));
  console.log("1");
});
el.addEventListener("click", () => {
  Promise.resolve().then(() => console.log("microtask 2"));
  console.log("2");
});
el.click()

按理说输出应该一样才对，但输出竟然变了！

是 click 这个函数有什么特别吗？
问了下 gpt，说是 click 会立即把回调同步执行的，那就符合预期了。

而当按钮是用户点击触发时，回调就分为多个宏任务触发了。