Всплывание событий и захват событий в JavaScript
Всплытие событий и захват событий — наиболее часто используемые термины в JavaScript во время потока событий. Это два способа распространения событий в HTML DOM API. В этой статье о всплытии событий и захвате событий в JavaScript будет подробно описано, почему они нужны нам в веб-разработке.
Что такое всплывающее окно событий в JavaScript?
Event Bubbling — это термин, с которым люди должны столкнуться при разработке веб-приложения или веб-страницы с использованием JavaScrip. По сути, всплытие событий — это метод, при котором обработчики событий вызываются, когда один элемент вложен в другой элемент и должен относиться к одному и тому же событию. Это похоже на инкапсуляцию.
Всплытие событий — это лишь небольшая часть обработки событий в JavaScript. Чтобы лучше понять это, мы должны знать о распространении событий и о том, как оно поддерживает пузырьковую передачу событий.
Что такое распространение событий?
Распространение событий можно сравнить в качестве родительского термина с всплытием и захватом событий в качестве его дочернего термина. Он представлен следующим образом:
<ul>
<li><a href="..."><img src="..." alt=""></a>
<li><a href="..."><img src="..." alt=""></a>
<li><a href="..."><img src="..." alt=""></a>
</ul>
Если вы нажмете на любое изображение, оно не только сгенерирует событие клика, но и перейдет к родительскому «a» и дедушке «li». Таким образом происходит распространение функции. Здесь изображение считается дочерним, и это цель события, в которой генерируется щелчок. Образ вместе со своими предками образует ветвь в древовидной терминологии. Ветвь важна, поскольку мы узнаем путь, по которому распространяется событие.
Каждый из слушателей вызывается с соответствующим объектом события, который собирает информацию о событии. Это распространение очень важно, поскольку мы узнаем процесс вызова всех слушателей для данного события. На картинке выше мы можем заметить, что определение ветки статично. Любые изменения дерева, происходящие во время события, игнорируются. Здесь распространение двунаправленное, то есть оно идет от окна к цели события и возвращается обратно. Здесь распространение широко подразделяется на три основных типа. Это:
- Фаза захвата: Переход от окна к целевой фазе события.
- Целевая фаза: Это целевая фаза.
- Фаза пузыря: От родителя цели события обратно к окну.
Что такое захват событий?
На этом этапе вызываются прослушиватели захвата, значение которых было зарегистрировано как «истина». Пишется как:
el.addEventListener('click', listener, true)
Здесь значение прослушивателя было зарегистрировано как «истина», поэтому это событие фиксируется. Если бы значения не было, то значение по умолчанию было бы ложным, и событие не было бы захвачено. Таким образом, на этом этапе событие, значение которого равно true, выходит из окна, вызывается и фиксируется.
Затем в целевом этапе события все зарегистрированные слушатели вызываются независимо от их состояния флага, которое является истинным или ложным.
Использование всплытия событий и захвата событий в JavaScript
На этапе Bubbling вызывается только не захватчик, то есть события, для которых значение флага равно «false». Всплытие событий и захват событий очень полезны и важны в терминологии DOM (объектная модель документа).
el.addEventListener('click', listener, false) // listener doesn't capture
el.addEventListener('click', listener) // listener doesn't capture
Вышеприведенный фрагмент кода показывает работу фаз всплытия и захвата. Не все события идут к цели события. Некоторые из них не пузырятся. Их путешествие останавливается после целевой фазы. Поток из трех фаз событий показан на следующей диаграмме:
Всплывающие события работают не во всех типах событий, однако слушатель должен обладать «.пузырь» Логическое свойство объекта события. Некоторые из других свойств включают в себя:
- е.цель: который ссылается на цель события.
- e.currentTarget: это режим, в котором зарегистрированы текущие слушатели. Здесь на значение ссылаются с помощью это ключевое слово.
- e.eventPhase: Это целое число, которое относится к трем другим ключевым словам, таким как Capturing_phase, Bubbling_phase, AT_Target фаза.
Рабочий порядок
Давайте внимательнее посмотрим на приведенную выше иллюстрацию. Давайте щелкнем элемент «buttonOne», и сразу же будет запущено событие. Обычно событие начинает свое путешествие с корня, который является самым верхним элементом дерева. Затем по дереву идет целевое событие — «buttonOne». Вот как он путешествует:
Как показано на рисунке, событие проходит через терминологию DOM, достигая в конце целевого события. Теперь, когда событие достигает своей цели, оно не заканчивается. Это продолжается и продолжается в рамках терминологии DOM, как показано на рисунке ниже.
Как и раньше, каждый элемент на пути события по мере его продвижения вверх получает уведомление о его существовании. Пока это продолжается, вы, должно быть, думаете, можем ли мы остановить этот процесс или нет. Что ж, ответ на вопрос: Да, мы можем остановить распространение события. Это делается путем вызова «остановить распространение» метод объекта события.
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'));
Применяя ключевое слово, мы можем остановить распространение. Это работает так, когда мы применяем ключевое слово « остановить распространение” тогда все события под основными событиями не вызываются и, следовательно, они не будут вызываться, как указано в приведенном выше фрагменте кода. Есть еще одно ключевое слово, известное как « остановить немедленное распространение». Как следует из названия, он немедленно останавливает дела братьев и сестер.
На этом мы подошли к концу нашей статьи. Надеюсь, вы поняли, что такое всплытие событий и захват событий в JavaScript.
Есть к нам вопрос? Пожалуйста, укажите это в разделе комментариев «Всплытие событий и захват событий в JavaScript», и мы свяжемся с вами.
