Как происходит всплытие событий при обработке событий? - PullRequest
Новая
       29

Как происходит всплытие событий при обработке событий?

3 голосов
/ 03 июня 2019

Я определил этот обработчик событий: 

document.addEventListener("load", function(){
  alert("Called on page load");
}, false);

Я заметил, что он не вызывается, когда логический флаг установлен в false (срабатывает на фазе пузырьков). Может ли кто-нибудь помочь мне понять, почему это так.

1 Ответ

3 голосов
/ 03 июня 2019

Когда событие отправляется элементу, оно спускается по дереву документа в фазе захвата, пока не достигнет цели. Затем , если это пузырьковое событие , оно снова всплывает.

С 2.1 Введение в «События DOM» в стандарте DOM :

Когда событие отправляется объекту, участвующему в дереве (например, элементу), он может достигать прослушивателей событий и у предков этого объекта. Сначала вызываются все прослушиватели событий предка объекта, чья переменная захвата установлена ​​в true, в древовидном порядке. Во-вторых, вызываются собственные слушатели событий И, наконец, и только в том случае, если значение атрибута пузырьков события равно true, прослушиватели событий-предков объекта вызываются снова, но теперь в обратном порядке дерева.

load не является пузырящимся событием, и - вот важная часть - он не нацелен на document. Когда вы добавляете прослушиватель захвата, вы действительно получаете load событий из частей содержимого документа, которые обычно получают событие, таких как сценарии или изображения. На странице, содержащей только сценарий, вы не увидите, что слушатель будет вызван вообще: 

<iframe srcdoc="<script>document.addEventListener('load', () => { alert('loaded'); }, true);</script>"></iframe>

И на странице с load событиями, которые срабатывают после того, как прослушиватель подключен, например, этот фрагмент стека, включающий <style> s, вы увидите его несколько раз: 

let i = 0;

document.addEventListener('load', e => {
    console.log(`loaded ${++i}: ${e.target.nodeName}`);
}, true);

Вы, вероятно, намеревались добавить прослушиватель без захвата в window вместо document, потому что window - это то, что получает событие load, в отличие от document. (Или вы могли иметь в виду что-то другое. Существует множество способов интерпретировать «загрузку страницы». См. Окно: событие загрузки в MDN для получения подробной информации о том, что означает событие load для window, и альтернативные варианты. если это было не то, что вы хотели.) 

window.addEventListener("load", function() {
    alert("Called on page load");
}, false);
...