Пузырьки событий и захват событий - наиболее часто используемые термины в JavaScript во время потока событий. Это два способа распространения событий в HTML DOM API. Эта статья о пузырях событий и захвате событий в JavaScript подробно опишет, почему они нам нужны в в следующей последовательности:
Что такое всплытие событий в JavaScript?
Пузыри событий - это термин, с которым люди должны сталкиваться при разработке веб-приложения или веб-страницы с использованием . По сути, всплытие событий - это метод, при котором обработчики событий вызываются, когда один элемент вложен в другой элемент и должен относиться к тому же событию. Это похоже на инкапсуляцию.
Пузыри событий - это лишь небольшая часть обработки событий в JavaScript. Чтобы лучше понять это, мы должны знать о распространении событий и о том, как оно поддерживает всплытие событий.
Что такое распространение событий?
Распространение события можно сравнить как родительский термин с восходящей цепочкой и захватом события как его дочерним элементом.Он представлен следующим образом:
Если вы нажмете на любое изображение, оно не только сгенерирует событие щелчка, но и перейдет к родительскому «a» и дедушке «li». Таким образом происходит распространение функции. Здесь изображение рассматривается как дочернее и является целью события, в котором создается щелчок. Изображение вместе со своими предками вместе образует ветвь в терминологии дерева. Ветвь важна, поскольку мы узнаем путь, по которому распространяется событие.
алгоритмы и структуры данных в java
Каждый из слушателей вызывается с соответствующим объектом события, который собирает информацию о событии. Это распространение очень важно, так как мы узнаем процесс вызова всех слушателей для данного события. Из рисунка выше мы можем заметить, что определение ветвления статично. Любые модификации дерева, происходящие во время события, игнорируются. Здесь распространение является двунаправленным, то есть идет от окна к цели события и возвращается обратно. Здесь распространение можно разделить на три основных типа. Это:
- Фаза захвата: Переход от окна к целевой фазе события.
- Целевая фаза: Это целевая фаза.
- Фаза пузыря: От родителя цели события обратно в окно.
Что такое захват событий?
На этом этапе вызываются приемники захвата, значение которых зарегистрировано как «истина».. Написано как:
el.addEventListener ('щелчок', слушатель, истина)Здесь значение слушателя было зарегистрировано как «истина», поэтому это событие фиксируется. Если бы не было значения, то значение по умолчанию было ложным, и событие не было бы зафиксировано. Таким образом, на этой фазе событие, значение которого истинно, только находит путь из окна, вызывается и фиксируется.
Затем на целевой фазе события вызываются все зарегистрированные слушатели, независимо от того, является ли их статус флага истинным или ложным.
Использование пузырей событий и захвата событий в JavaScript
На этапе пузыря вызывается только не захватывающее устройство, то есть события, для которых значение флага равно «false». Возбуждение событий и захват событий очень полезны и важны в терминологии DOM (объектной модели документа).
el.addEventListener ('click', listener, false) // слушатель не захватывает el.addEventListener ('click', listener) // слушатель не захватываетПриведенный выше фрагмент кода показывает работу фазы всплывания и захвата. Не все события попадают в цель события. Некоторые из них не всплывают. Их путешествие прекращается после целевой фазы. Трехфазный поток событий показан на следующей диаграмме:
Барботаж событий работает не во всех типах событий, однако слушатель должен обладать '.пузырь »Логическое свойство объекта события. Некоторые из других свойств включают:
- e.target: ссылающийся на цель события.
- e.currentTarget: это режим, в котором зарегистрированы текущие слушатели. Здесь значение указывается с помощью этот ключевое слово.
- e.eventPhase: Это целое число, которое относится к трем другим ключевым словам, например Capturing_phase, Bubbling_phase, AT_Target фаза.
Порядок работы
Давайте подробнее рассмотрим иллюстрацию выше. Нажимаем на элемент «buttonOne» и сразу же запускаем событие. Обычно событие начинается с корня, который является самым верхним элементом дерева. Затем он следует по дереву к целевому событию «buttonOne». Вот как он путешествует:
Как показано на рисунке, событие проходит через терминологию DOM, достигая в конечном итоге целевого события. Теперь, когда событие достигает своей цели, оно не заканчивается. Это продолжается и продолжается в рамках терминологии DOM, как показано на рисунке ниже.
хеш-карта против хеш-таблицы
Как и раньше, каждый элемент на пути события по мере продвижения вверх получает уведомление о своем существовании. По мере того, как это происходит, вы, должно быть, думаете, можем ли мы остановить процесс или нет. Что ж, ответ на вопрос: да, мы можем остановить распространение события. Это делается путем вызова «StopPropagation» метод объекта события.
window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' щелчок ', слушатель (' b1 ')) window.addEventListener (' щелчок ', слушатель (' b2 '))Применяя ключевое слово, мы можем остановить распространение. Это работает так, когда мы применяем ключевое слово « stopPropagation » тогда все события под основными событиями не вызываются и, следовательно, они не будут вызываться, как это упоминается в фрагменте кода выше. Есть еще одно ключевое слово, известное как « stopImmediatePropagation ». Как следует из названия, это немедленно прекращает разбирательство братьев и сестер.
На этом мы подошли к концу нашей статьи. Надеюсь, вы поняли, что такое всплытие событий и захват событий в JavaScript.
Теперь, когда вы знаете о пузырях событий и захвате событий в JavaScript, ознакомьтесь с пользователя Edureka. Курс по сертификации веб-разработки поможет вам узнать, как создавать впечатляющие веб-сайты с помощью HTML5, CSS3, Twitter Bootstrap 3, jQuery и API Google и развертывать их в Amazon Simple Storage Service (S3).
Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев «Пузырьки событий и захват событий в JavaScript», и мы свяжемся с вами.