Javascript 事件处理程序、事件队列和异步行为

考虑以下反应组件。我的问题不仅限于反应。这是一个Javascript问题：

function MyTest(){
  const result = () =>{
      console.log("Time to play");
      setTimeout (() =>{
          console.log("async")
      },500);
  };
    useEffect(()=>{
        document.getElementById('id-1').click();
        console.log("When?");
    })
    return (
        <button id="id-1" onClick={result}>Click me</button>
    )
}

但我对事件处理程序感到困惑。我所知道的是：浏览器事件处理程序的行为类似于其他异步通知。它们在事件发生时被安排，但必须等待正在运行的其他脚本完成，才能有机会运行。 如果以上是正确的，我希望得到以下输出：

When?
Time to play
async

因为对于要运行的事件处理程序，执行堆栈不是空的（console.log（“When？”）位于其中）。上述三段论有什么错

附言：要想让上述内容更加混乱，请查看此链接

我看到：

事件可以同步或异步调度

同步事件（同步事件）被视为同步事件 在先进先出模型中的虚拟队列中，按顺序排序 与其他事件相关的时间发生，以及 DOM和对用户的交互。此虚拟队列中的每个事件都是 延迟到上一个事件完成传播 行为，或被取消。某些同步事件由特定的 设备或进程，例如鼠标按钮事件。这些事件是 受为该组事件定义的事件顺序算法控制， 用户代理将按照定义的顺序发送这些事件

所以我猜这种假设并不总是如此：

浏览器事件处理程序的行为类似于其他异步通知

---

并解释了为什么会看到输出。

@Dennis Vash的评论解释了一切

document.getElementById('id-1').click();

---

不创建浏览器事件。就这么简单

如果将setTimeout更改为0，则会给出不同的顺序。为什么您认为这是一个浏览器事件？您刚刚通过引用调用了一个函数

document.getElementById('id-1').click();