Всплывающие события — наиболее часто используемый термин в 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 предотвращает вызов других прослушивателей того же события.

Я надеюсь, вы понимаете концепцию. Прокомментируйте меня ниже, если у вас есть какие-либо вопросы.

Спасибо за чтение…!!