Событие — это сигнал о том, что что-то произошло, и оно моделируется по образцу шаблона наблюдателя, что допускает слабую связь между поведением и внешним видом страницы.
События после того, как они происходят, распространяются по DOM, чтобы их слушатели могли на них реагировать. Порядок, в котором эти события поступают на страницу, называется потоком событий.
Поток событий DOM
Поток событий, указанный параметром DOM Level 2 Events, состоит из трех фаз: этап захвата событий, в целевом объекте и этап пузырькового распространения событий. Захват событий происходит первым, предоставляя возможность перехватывать события, если это необходимо.
В потоке событий спецификации DOM Level 2 Events фактическая цель (элемент ‹div›) не получает событие во время этапа захвата. На приведенной выше диаграмме показано иное, поскольку Safari, Chrome и Firefox инициируют событие на этапе захвата в целевом событии (пример был выполнен в хроме).
Это означает, что фаза захвата, которая должна была остановиться на родительском объекте цели события (элемент ‹body›), продолжается до цели события (элемент ‹div›) до того, как начнется следующая фаза от цели события (фаза всплытия), который активирует ‹div› для возврата к документу.
Конечным результатом этой модификации является то, что есть две возможности работы с событием на цели.
Захват событий
Теория захвата событий (также известная как распределение событий) заключается в том, что наименее специфичный узел должен получать событие первым, а наиболее специфичный узел должен получать событие последним. Чтобы использовать захват события, третьему аргументу (в данном случае useCapture) метода addEventListener присваивается значение true вот так.
При захвате события событие щелчка сначала принимается документом, а затем продолжается вниз по дереву DOM к фактической цели события, элементу ‹div›.
Захват событий обычно не используется из-за отсутствия поддержки в старых браузерах. Общий совет состоит в том, чтобы свободно использовать всплывающую подсказку событий, сохраняя при этом захват событий для особых обстоятельств.
Пузырьковое событие
Всплывание событий — это когда говорят, что событие началось с наиболее определенного элемента (самой глубокой возможной точки в дереве документа), а затем перемещается вверх к наименее определенному узлу (документу). Для использования всплытия событий третьему аргументу (в данном случае useCapture) метода addEventListener присваивается значение false. Но поскольку false — это его значение по умолчанию, мы бы его проигнорировали.
Когда вы щелкаете по элементу div, событие клика происходит в следующем порядке: div — body — html — document. Событие щелчка поднимается вверх по дереву DOM, срабатывая на каждом узле на своем пути, пока не достигнет объекта документа. (firefox, chrome и safari продолжаются до объекта окна) — безумие, верно? они всегда делают дополнительные 😂.
Делегация мероприятия
Захват и всплытие позволяют нам реализовать один из самых мощных шаблонов обработки событий, который называется делегирование событий. Также можно использовать свойство target, чтобы забросить широкую сеть для определенного типа события.
Например, если у вас есть узел, содержащий длинный список кнопок, как на изображении выше, может быть удобнее зарегистрировать обработчик одиночного клика на внешнем узле (в данном случае div) и использовать его. используйте свойство target, чтобы выяснить, была ли нажата кнопка, а не регистрируйте отдельные обработчики для всех кнопок.
Подробнее о событиях
Остановка распространения событий
В любой момент обработчик события может вызвать метод stopPropagation для объекта события, чтобы предотвратить получение события обработчиками более высокого уровня.
Это может быть полезно, когда, например, у вас есть кнопка внутри другого кликабельного элемента, и вы не хотите, чтобы нажатие на кнопку активировало поведение щелчка внешнего элемента.
Предотвратить событие по умолчанию
Со многими событиями связано действие по умолчанию. Типичным примером является действие обновления, которое происходит при отправке формы. Для большинства типов событий обработчики событий JavaScript вызываются до того, как происходит поведение по умолчанию. Если обработчик не хочет, чтобы происходило это нормальное поведение, обычно потому, что он уже позаботился об обработке события, он может вызвать метод preventDefault для объекта события.
Это можно использовать для реализации собственных сочетаний клавиш или контекстного меню. Его также можно использовать, чтобы возмутительно вмешиваться в поведение, которое ожидают пользователи.
Заключение
Без событий и слушателей наши программы, пусть и красивые, были бы не более чем выражением идей и эмоций, лишенным обратной связи. Это то, что делает события интересной темой в Javascript, поскольку они позволяют нам понять, как мир относится к нашим приложениям посредством взаимодействия. Я надеюсь, вы узнали кое-что о том, как они работают и как извлечь выгоду из их распространения в вашем приложении. Увидимся 👋
