Объяснение всплытия и захвата событий в Javascript: как использовать?

Опубликовано: 2020-03-26

Оглавление

Введение

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

Это два важных способа распространения события в HTML DOM API, когда оба элемента регистрируют дескриптор события, и событие происходит в элементе, вложенном в другой элемент. Порядок, в котором событие принимается элементами, определяется способом распространения события. Читайте дальше, чтобы узнать об использовании всплывающих окон и захвата событий в JavaScript и почему они необходимы при разработке веб-страниц.

Основные выводы

  • Объяснение терминов событие, поток событий, обработчики событий и прослушиватели событий
  • Всплытие событий и захват событий в JavaScript
  • Утилита всплытия событий и захвата событий в JavaScript

События и поток событий

Взаимодействие веб-страниц HTML с JavaScript опосредовано событиями, которые происходят, когда страница обрабатывается пользователем или браузером. Загрузка страницы, нажатие пользователем кнопки, закрытие окна — все это примеры событий.

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

Обработчики событий и прослушиватели событий в JavaScript

Обработчик событий — это код JavaScript, который записывается внутри тегов HTML, а не внутри тегов <script>. Обработчики событий выполняют JavaScript, когда происходит событие, например нажатие кнопки. Основной синтаксис: name_of_handler="здесь код JavaScript"

<a href="https://www.google.com" onClick="alert('привет!")">Google</a>

Процедура, ожидающая возникновения события, называется прослушивателем событий. В JavaScript есть встроенная функция addEventListener(), которая получает событие для прослушивания и вызывает второй аргумент при запуске указанного события. Синтаксис: element.addEventListener(event, listener);

Всплывание событий в JavaScript

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

Источник

<!DOCTYPE HTML>
<html>
<голова>
<название>……</название>
</голова>
<тело>
<div id="demo"> Нажмите здесь.</div>
</тело>
</html>

При нажатии на элемент <div> событие «щелчок» происходит в следующем порядке:

  1. <дел>
  2. <тело>
  3. <html>
  4. Документ

Событие «щелчок» запускает элемент <div>. Каждый узел последовательно запускается по дереву DOM вверх, пока не будет достигнут объектный документ.

Читайте: Идеи и темы проектов полного стека

Захват событий в JavaScript

Захват событий — это альтернативная модель потока событий, впервые представленная в Netscape Browser. Согласно этой модели, событие сначала получает наименее конкретный узел, а наиболее конкретный узел или наиболее глубоко вложенный элемент получает событие последним. В этой модели событие перехватывается до того, как оно достигает фактической цели. Однако, в отличие от Event Bubbling, современные браузеры не поддерживают эту модель, и поэтому Event Capturing можно использовать только в определенных обстоятельствах.

Источник

Ссылаясь на пример, указанный в предыдущем разделе, щелчок по элементу <div> запускает событие «щелчок» в следующем порядке:

  1. Документ
  2. <тело>
  3. <html>
  4. <дел>

Что происходит на этапе захвата событий?

На этапе захвата события вызываются прослушиватели захвата, значение которых зарегистрировано как «истина». Он пишется следующим образом:

el.addEventListener('Click', слушатель, правда)

Здесь событие фиксируется, потому что значение прослушивателя зарегистрировано как «истина». В случае отсутствия значения по умолчанию используется значение «false», в результате чего событие не фиксируется. Следовательно, на этом этапе вызываются и фиксируются только события с истинным значением. На последующем целевом этапе вызываются все зарегистрированные прослушиватели, независимо от того, зарегистрировано ли их значение как true или false.

Поток событий DOM в JavaScript

Уровень DOM 2 определяет три этапа модели потока событий:

  • Этап захвата событий
  • В цель
  • Фаза всплытия событий

Источник

Если есть возможность перехвата события, сначала происходит захват события. За этим следует фактическая цель, получающая событие. В конце концов, на фазе бульканья событий происходит окончательная реакция на событие. Ссылаясь на пример, указанный в предыдущем разделе, щелчок по элементу <div> запускает событие «щелчок» в порядке, показанном на диаграмме выше.

Читайте: Зарплата Full Stack Developer в Индии

Утилита всплытия событий и захвата событий в JavaScript

На этапе всплытия событий вызываются только события со значением флага «false» (не захватчики). Всплытие событий и захват событий являются важными аспектами DOM.

el.addEventListener('Click', listener, false) // слушатель не захватывает
el.addEventListener('Click', listener) // слушатель не захватывает

Приведенный выше код иллюстрирует, как работают фазы всплытия и захвата. Каждое событие не достигает цели. Некоторые события не всплывают и останавливаются после целевой фазы. Пузырьковое событие применимо не ко всем видам событий, и слушатель должен иметь логическое свойство «.bubble» объекта события, помимо некоторых других свойств, таких как -e.target (для ссылки на цель события) и e.eventPhase (в этом режиме регистрируются текущие слушатели).

Заключение

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

Если вам интересно узнать больше о полном стеке, ознакомьтесь с дипломом PG upGrad & IIIT-B по разработке программного обеспечения с полным стеком, который предназначен для работающих профессионалов и предлагает более 500 часов интенсивного обучения, более 9 проектов и заданий, IIIT- Статус B Alumni, практические практические проекты и помощь в трудоустройстве в ведущих фирмах.

Получите работу своей мечты

ДИПЛОМ PG UPGRAD И IIIT-BANGALORE В РАЗРАБОТКЕ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ
Узнать больше @ upGrad