Всплывающие события — наиболее часто используемый термин в JavaScript. Event Bubbling — это термин, с которым люди должны столкнуться при разработке веб-приложения или веб-страницы с использованием JavaScript.
В этом посте мы собираемся понять, что такое всплытие событий и как мы можем обрабатывать его для вложенных элементов.
Начнем с примера
div { padding: 50px; background-color: rgba(150, 150, 150, 0.5); text-align: center; cursor: pointer; }
В приведенном выше коде обработчик щелчка назначается каждому элементу.
Когда мы нажимаем на ввод, он вызывает обработчик для ввода -> childDiv -> parentDiv
и показывает предупреждение
input -> Я из input
childDiv -› Я из дочернего div
parentDiv -› Я из родительского div
Тебе не кажется, что это немного странно?
Вот концепция пузырьков событий в JavaScript.
Когда событие запускается для элемента, оно сначала вызывает обработчик для себя, затем для своего родителя, а затем полностью для других предков (всех следующих родителей в восходящей цепочке).
Этот процесс называется "пузырьком", потому что событие "пузырится" от внутреннего элемента вверх через родителей, как пузырь в воде.
Примечание. не все события всплывают до DOM. Такие события, как фокус, размытие, загрузка и некоторые другие, не всплывают.
Хватит пузыриться
Пузырьковое событие идет от целевого элемента прямо вверх. Обычно идет вверх до <html>
, а потом до document
объекта, а некоторые события доходят даже до window
, вызывая все обработчики на пути.
Но любой обработчик может решить, что событие полностью обработано, и прекратить всплытие.
Метод для этого event.stopPropagation()
.
Например, здесь form.onclick
не работает, если нажать на <button>
:
<form onclick=”alert('I will not be visible')”> <button onclick=”event.stopPropagation()”>Click me</button> </form>
stopPropagation()предотвращает дальнейшее распространение текущего события. Это не предотвращает поведение по умолчанию; например, клики по ссылкам все еще обрабатываются. Если вы хотите остановить такое поведение, см. метод preventDefault()
.
Если к одному и тому же элементу для одного и того же типа события прикреплено несколько слушателей, они вызываются в том порядке, в котором были добавлены. Если stopImmediatePropagation()
вызывается во время одного такого вызова, остальные прослушиватели вызываться не будут.
Метод stopImmediatePropagation()
интерфейса Event
предотвращает вызов других прослушивателей того же события.
Я надеюсь, вы понимаете концепцию. Прокомментируйте меня ниже, если у вас есть какие-либо вопросы.
Спасибо за чтение…!!