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

Когда событие происходит с элементом, оно влияет не только на этот конкретный элемент; он также может влиять на свои родительские элементы вплоть до корня документа. Всплывание событий описывает процесс, посредством которого события «всплывают» от целевого элемента через его родительские элементы в иерархии DOM.

Как работает всплывающее окно событий

Когда в элементе происходит событие, например нажатие кнопки, происходит следующая последовательность событий:

  1. Событие сначала запускается для целевого элемента (элемента, в котором возникло событие).
  2. Затем событие распространяется на родительский элемент цели, затем на родительский элемент и так далее, пока не достигнет корневого элемента (обычно элемента <html>) документа.

Это распространение событий от целевого элемента к корню называется всплывающим пузырем событий.

Почему важно всплывать события

Всплывание событий имеет практическое значение, когда речь идет об обработке событий и делегировании:

  1. Упрощенная обработка событий. Всплывающие события позволяют вам прикрепить один прослушиватель событий к общему элементу-предку, и этот прослушиватель будет запускаться для событий во всех элементах-потомках. Это особенно полезно, когда у вас есть список элементов с похожим поведением, так как вы можете избежать присоединения отдельных прослушивателей событий к каждому элементу.
  2. Динамический контент: когда вы динамически добавляете элементы в DOM (с помощью JavaScript), вам не нужно напрямую присоединять прослушиватели событий к этим новым элементам. Вместо этого вы можете воспользоваться всплывающими окнами событий для обработки событий родительского элемента, даже для элементов, которые были добавлены после первоначальной загрузки страницы.

Пример:

Рассмотрим простой пример со следующими вложенными элементами:

 <section>
      <p>
        I am a paragraph:
        <button>Click</button>
      </p>
 </section>

Предположим, у вас есть прослушиватель событий щелчка по всем этим элементам с разными функциями:

const button = document.querySelector("button");
const paragraph = document.querySelector("p");
const section = document.querySelector("section");

button.addEventListener("click", () => {
  console.log("button clicked");
});

paragraph.addEventListener("click", () => {
  console.log("paragraph clicked");
});

section.addEventListener("click", () => {
  console.log("section clicked");
});

Когда вы нажимаете кнопку, событие всплывает вверх по иерархии, и вы получаете следующий вывод в консоли:

Это потому что:

  1. Событие срабатывает на кнопке.
  2. Затем по абзацу
  3. Наконец, в самом дальнем разделе

Остановка всплывающих событий

В некоторых случаях вы можете захотеть остановить распространение события вверх по иерархии DOM. Для этого вы можете использовать метод event.stopPropagation() в вашем обработчике событий:

const button = document.querySelector("button");
const paragraph = document.querySelector("p");
const section = document.querySelector("section");

button.addEventListener("click", (event) => {
  console.log("button clicked");
  event.stopPropagation();
});

paragraph.addEventListener("click", () => {
  console.log("paragraph clicked");
});

section.addEventListener("click", () => {
  console.log("section clicked");
});

И теперь вы увидите в консоли только «кнопку нажали».

Остановка распространения события может быть полезна, когда вы хотите, чтобы событие влияло только на целевой элемент, а не на его родительские элементы.

Надеюсь, вы нашли это полезным!