Как слушатели событий в пути распространения ставятся в очередь в JavaScript - PullRequest
Новая
       84

Как слушатели событий в пути распространения ставятся в очередь в JavaScript

0 голосов
/ 29 сентября 2019

Рассмотрим следующий пример: 

<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 упоминает

Каждое событие в этой виртуальной очереди задерживается до тех пор, пока предыдущее событие не завершит свое поведение распространения, или не будет отменено.

Нов нем не уточняется, как происходит распространение события с точки зрения очередей.Может ли кто-нибудь предоставить более подробную информацию или указать мне некоторые документы?Спасибо!

1 Ответ

0 голосов
/ 29 сентября 2019

Ну, вам нужно добавить тайм-аут в миллисекундах к вашей функции setTimeout();. 

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