传播路径中的事件侦听器如何在 JavaScript 中排队答案

【问题标题】：How event listeners in the propagation path get queued in JavaScript传播路径中的事件侦听器如何在 JavaScript 中排队
【发布时间】：2019-09-29 01:54:10
【问题描述】：

考虑以下示例：

<body>
  <div>
    <div>
      <div id="target">Click and watch console.</div>
    </div>
  </div>

  <script>
    const target = document.getElementById("target");
    const body = document.body;

    body.addEventListener("click", () => {
      console.log("event bubbled to body");
    });

    target.addEventListener("click", () => {
      console.log("target (first listener)");
      setTimeout(() => {
        console.log("setTimeout");
      })
    });

    target.addEventListener("click", () => {
      // blocking code
      for (let i = 0; i < 10 ** 9; i++) {}
      console.log("target (second listener)");
    });
  </script>
</body>

控制台中的输出是

target (first listener)
target (second listener)
event bubbled to body
setTimeout

setTimeout是在事件冒泡结束后输出的，我的解释是：

每个事件侦听器都会在消息队列中排队一个作业。
调度事件时，传播路径中所有事件侦听器（在本例中为 3）的作业会立即按顺序排队。
当setTimeout 在事件处理程序中执行时，它的作业会排在所有事件侦听器后面。

我的理解正确吗？ W3C 规范mentions

此虚拟队列中的每个事件都会延迟到上一个事件已完成其传播行为，或被取消。

但它没有详细说明如何在排队方面处理事件传播。谁能提供更多见解或指向我一些文档？谢谢！

【问题讨论】：

标签： javascript events event-handling dom-events event-loop

【解决方案1】：

好吧，您需要在 setTimeout(); 函数中添加一个以毫秒为单位的超时。

setTimeout(function () {
  //more code
}, milliseconds);

【讨论】：