Понимание распространения событий в JavaScript

События в JavaScript действуют как уведомления о том, что произошло взаимодействие с пользователем или другое действие. Например, когда вы нажимаете кнопку формы, ваш браузер генерирует событие, указывающее, что это произошло. При вводе текста в поле поиска также возникают события, и именно так автоматическое предложение часто работает в Интернете.

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

Прочтите, чтобы узнать все о распространении событий и о двух доступных типах.

Что такое обработка событий в JavaScript?

Вы можете использовать код JavaScript, чтобы улавливать события, которые вызывает веб-страница, и реагировать на них. Вы можете сделать это, чтобы переопределить поведение по умолчанию или предпринять действия, когда по умолчанию не существует. Типичный пример - проверка формы. Обработка событий позволяет прервать обычный процесс отправки формы.

Рассмотрим этот пример:

Нажми на меня

В приведенном выше коде есть элемент кнопки с идентификатором с именем button. Он имеет прослушиватель событий щелчка, который отображает предупреждение с сообщением Привет мир.

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

Распространение событий описывает порядок, в котором события проходят через DOM-дерево когда их запускает веб-браузер.

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

Есть два типа размножения:

1. Возврат событий, при котором события всплывают вверх от дочернего к родительскому.
2. Захват событий, при котором события перемещаются вниз от родителя к потомку.

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

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

Рассмотрим следующий пример. Он имеет три вложенных элемента: div, форму и кнопку. Каждый элемент имеет щелкнуть слушатель событий. В браузере отображается тревога с сообщением при нажатии на каждый элемент.

По умолчанию, веб-браузер отображает предупреждения в следующем порядке: кнопка, форма, затем div. События передаются от ребенка к родителю.

 div


 форма 



 Кнопка

Что такое захват событий?

При захвате событий порядок распространения противоположен пузырьковому. В остальном концепция идентична. Единственная разница с захватом состоит в том, что события происходят от родителя к потомку. В отличие от предыдущего примера с захватом событий браузер будет отображать предупреждения в следующем порядке: div, форма и кнопка.

Чтобы добиться захвата событий, вам нужно внести всего одно изменение в код. Второй параметр addEventListener () определяет тип распространения. По умолчанию это false, что соответствует восходящей цепочке. Чтобы включить захват событий, вам необходимо установить для второго параметра значение true.

 div.addEventListener ("клик", () => {
 предупреждение ("div")
 }, истинный);
 form.addEventListener ("клик", () => {
 предупреждение ("форма")
 }, истинный);
 button.addEventListener ("клик", () => {
 оповещение («кнопка»)
 }, истинный);

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

Вы можете остановить распространение событий с помощью кнопки stopPropagation () метод. В addEventListener () принимает имя события и функцию-обработчик. Обработчик принимает в качестве параметра объект события. Этот объект содержит всю информацию о событии.

Когда вы вызываете stopPropagation () метод, событие перестанет распространяться с этой точки. Например, когда вы используете stopPropagation () в элементе формы события перестанут подниматься в div. Если вы нажмете кнопку, вы увидите события, возникающие в кнопке и форме, но не в div.

form.addEventListener ("клик", (e) => {
e.stopPropagation ();
 предупреждение ("форма");
});

Связанный: Полная шпаргалка по JavaScript

У JavaScript много возможностей под капотом

Обработка событий в JavaScript является мощной, сравнимой со многими полнофункциональными языками интерфейса. Когда вы разрабатываете интерактивные веб-приложения, это жизненно важная часть вашего набора инструментов. Но есть много других сложных тем, которые нужно понять. Профессиональным разработчикам JavaScript есть чему поучиться!

Если вы хотите научиться кодировать JavaScript как профессионал, ознакомьтесь с нашим руководством по умным лайнерам и подготовьтесь к следующему собеседованию.

11 однострочных предложений JavaScript, которые вы должны знать

Добейтесь многого с помощью небольшого количества кода, используя этот широкий спектр однострочников JavaScript.

Читать далее

Об авторе