Почему событие, отправляемое окном, не фиксируется другими элементами? - PullRequest
Новая
       6

Почему событие, отправляемое окном, не фиксируется другими элементами?

0 голосов
/ 30 апреля 2020 
  <body>
    <div id="d"></div>
    <script>
      document
        .getElementById("d")
        .addEventListener("test", () => console.log("div"), true);

      document.body.addEventListener("test", () => console.log("body"), true);

      window.addEventListener("test", () => console.log("window"));

      window.dispatchEvent(new CustomEvent("test"));
    </script>
  </body>

Если вы запустите приведенный выше код, вы увидите только один вывод.

Ответы [ 3 ]

0 голосов
/ 30 апреля 2020

Причина, по которой существует только один выход, заключается в том, что вы отправили только событие для объекта окна.

Если вы хотите иметь все журналы консоли, вам необходимо выполнить диспетчеризацию следующим образом. 

document.getElementById("d").dispatchEvent(new CustomEvent("test"));
document.body.dispatchEvent(new CustomEvent("test"));
window.dispatchEvent(new CustomEvent("test"));

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

body
div
body
window

Полный код следующим образом 

<div id="d"></div>

document.getElementById("d").addEventListener("test", () => console.log("div"), true);
document.body.addEventListener("test", () => console.log("body"), true);
window.addEventListener("test", () => console.log("window"));

document.getElementById("d").dispatchEvent(new CustomEvent("test"));
document.body.dispatchEvent(new CustomEvent("test"));
window.dispatchEvent(new CustomEvent("test"));
0 голосов
/ 30 апреля 2020

Я понял!

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

Так что, если событие инициируется div, можно захватить как окно, так и тело: 

  <body>
    <div id="d"></div>
    <script>
      const d = document.getElementById("d");

      d.addEventListener("test", () => console.log("div"));

      document.body.addEventListener("test", () => console.log("body"), true);

      window.addEventListener("test", () => console.log("window"), true);

      d.dispatchEvent(new CustomEvent("test"));
    </script>
  </body>
0 голосов
/ 30 апреля 2020

Пользовательское событие было установлено только для окна. Попробуйте это в вашем сценарии. 

<script>

  document.getElementById("d").addEventListener("test", () => console.log("div"), true);

  document.getElementById("d").dispatchEvent(new CustomEvent("test"));


  document.body.addEventListener("test", () => console.log("body"), true);
  document.body.dispatchEvent(new CustomEvent("test"));


  window.addEventListener("test", () => console.log("window"));

  window.dispatchEvent(new CustomEvent("test"));

</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...