В этой статье мы рассмотрим распространение событий в JavaScript. Это одна из самых важных концепций, которую необходимо понимать в JavaScript при работе с прослушивателями событий.
Введение
Распространение события относится к тому, как событие проходит через объектную модель документа. Это можно представить как электричество, проходящее по проводу, пока не достигнет места назначения.
Мы знаем, что DOM заполнен узлами, и что касается распространения события, событие должно пройти через каждый узел, присутствующий в DOM, пока не достигнет конца или не будет принудительно остановлено.
Распространение событий состоит из трех этапов при работе с прослушивателями событий:
- Захват событий
- Цель
- Пузырьковое событие
Фаза захвата события начинается с корня и проходит весь путь до цели, а как только цель достигнута, она переходит в фазу всплытия, которая возвращается от цели к корню.
Рассмотрим простой пример. Прежде всего создайте файл index.html, как показано ниже:
Структура просто состоит из div(div2), который является родительским для div(div1), который содержит кнопку с текстом «Click», как показано ниже.
Теперь давайте добавим разные прослушиватели событий, чтобы понять разные фазы распространения событий. Для этого создадим новый файл с именем index.js, как показано ниже.
Как вы можете видеть выше, я добавил прослушиватели событий к объекту окна, объекту документа, двум элементам div и кнопке. Кроме того, в метод addEventListener() добавлен третий параметр, представляющий собой логическое значение, указывающее, через какую фазу вы хотите пройти. По умолчанию для этого параметра задано значение false, что означает, что он пройдет фазу всплытия событий. Если для него задано значение true, он пройдет этап захвата событий.
Теперь при нажатии на кнопку в консоли можно увидеть следующее. Поскольку это этап захвата событий, он начинается с окна и идет вниз, уведомляя все остальные элементы, с которыми сталкивается, вплоть до цели, которой в данном случае является кнопка.
Как запустить третью фазу, т. е. всплытие событий? Для этого измените третий параметр метода addEventListener() на false.
Теперь вы можете видеть, что он начался с кнопки, затем он идет к div1, затем к div2 и так далее вверх, пока не достигнет объекта окна.
Мы подошли к концу этого урока. Этот урок во многом вдохновлен видео, созданным CodeLab. Спасибо за прочтение! Удачного кодирования!
Если у вас есть какие-либо вопросы, оставьте их в разделе комментариев ниже. Свяжитесь со мной в LinkedIn. Кроме того, если вы хотите взглянуть на мою фантастическую коллекцию разработанных приложений, не забудьте проверить Google Play Store.
Узнайте больше обо мне здесь.
