Что такое пузыри событий в JavaScript? Распространение событий объяснено

Пузырьки событий — это термин, который вы могли встретить в своих путешествиях по JavaScript. Это относится к порядку, в котором вызываются обработчики событий, когда один элемент вложен во второй элемент, и оба элемента зарегистрировали прослушиватель для одного и того же события (например, щелчок).

Но всплески событий — это только одна часть головоломки. Это часто упоминается в связи с захватом и распространением событий. А для работы с событиями в JavaScript необходимо четкое понимание всех трех концепций, например, если вы хотите реализовать шаблон делегирования событий .

В этом посте я объясню каждый из этих терминов и продемонстрирую, как они сочетаются друг с другом. Я также покажу вам, как базовое понимание потока событий JavaScript может дать вам детальный контроль над вашим приложением. Обратите внимание, что это не учебник по событиям, поэтому предполагается знакомство с темой. Если вы хотите узнать больше о событиях в целом, почему бы не проверить нашу книгу: JavaScript: от новичка до ниндзя .

Что такое распространение событий?

Начнем с распространения событий. Это общий термин как для всплытия событий, так и для захвата событий. Рассмотрим типичную разметку для создания списка связанных изображений, например, для галереи миниатюр:

<ul> <li><a href="..."><img src="..." alt=""></a> <li><a href="..."><img src="..." alt=""></a> ... <li><a href="..."><img src="..." alt=""></a> </ul> 

Щелчок по изображению генерирует не только событие click для соответствующего элемента IMG , но и для родительского элемента A , для дедушки LI и т. Д., Проходя весь путь до всех предков элемента, прежде чем завершиться в объекте window ,

В терминологии DOM изображение является целью события , самым внутренним элементом, над которым произошел щелчок. Цель события и его предки от родительского объекта до window объекта образуют ветвь в дереве DOM. Например, в галерее изображений эта ветвь будет состоять из узлов: IMG , A , LI , UL , BODY , HTML , document , window .

Обратите внимание, что window самом деле не является узлом DOM, но оно реализует интерфейс EventTarget , поэтому для простоты мы обрабатываем его так, как будто это родительский узел объекта документа.

Эта ветвь важна, потому что это путь, по которому события распространяются (или проходят). Это распространение — это процесс вызова всех слушателей для данного типа события, привязанных к узлам в ветви. Каждый слушатель будет вызываться с объектом event который собирает информацию, относящуюся к событию (подробнее об этом позже).

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

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

Распространение является двунаправленным, от окна до цели события и обратно. Это распространение можно разделить на три этапа:

1. От окна к родителю цели события: это фаза захвата
2. Сама цель события: это целевая фаза
3. От родителя цели события обратно к окну: пузырьковая фаза

Что отличает эти фазы, так это тип слушателей, которые называются.

Этап захвата событий

На этом этапе вызываются только прослушиватели захвата , а именно те прослушиватели, которые были зарегистрированы с использованием значения true для третьего параметра addEventListener :

 el.addEventListener('click', listener, true) 

Если этот параметр пропущен, его значение по умолчанию равно false и слушатель не является перехватчиком.

 el.addEventListener('click', listener, false) // listener doesn't capture el.addEventListener('click', listener) // listener doesn't capture 

 window.addEventListener('click', e => { e.stopPropagation(); }, true); window.addEventListener('click', listener('c1'), true); window.addEventListener('click', listener('c2'), true); window.addEventListener('click', listener('b1')); window.addEventListener('click', listener('b2')); 

 window.addEventListener('click', e => { e.stopImmediatePropagation(); }, true); window.addEventListener('click', listener('c1'), true); window.addEventListener('click', listener('c2'), true); window.addEventListener('click', listener('b1')); window.addEventListener('click', listener('b2'));