Всплытие событий (Event Bubbling) — это механизм, который описывает порядок, в котором события передаются по элементам DOM, начиная с целевого элемента и заканчивая корнем документа. Это один из методов распространения событий, наряду с захватом событий (Event Capturing).

Когда происходит событие на каком-либо элементе, это событие "всплывает" от этого элемента к его родителям, пока не достигнет объекта document. В процессе всплытия родительские элементы могут перехватывать это событие, если на них установлены обработчики.

Пример всплытия события

Допустим, у нас есть HTML-структура:

<div id="parent">
  <button id="child">Click me</button>
</div>

И JavaScript код:

document.getElementById('parent').addEventListener('click', function() {
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', function() {
  console.log('Child clicked');
});

Если пользователь кликает по кнопке, то сначала срабатывает обработчик на кнопке, а затем, благодаря всплытию, срабатывает обработчик на родительском элементе.

Вывод в консоли будет следующим:

Child clicked
Parent clicked

Как это работает?

Сначала событие отправляется к элементу, на котором оно произошло — в данном случае это кнопка с id="child".

Затем событие "всплывает" вверх по DOM-дереву к родительским элементам, и в нашем случае оно передается от кнопки к контейнеру <div id="parent">.

Если на родительских элементах есть обработчики этого события, они также срабатывают.

Преимущества и недостатки всплытия событий

Преимущества:

Делегирование событий: Всплытие позволяет использовать технику делегирования событий. Вместо того чтобы добавлять обработчики событий на каждый дочерний элемент, можно повесить обработчик на родительский элемент. Это особенно полезно, если дочерних элементов много или они создаются динамически.
Пример делегирования событий:

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target && event.target.id === 'child') {
    console.log('Child clicked');
  }
});

В этом примере, даже если кнопки с id="child" добавляются динамически, обработчик на родительском элементе все равно будет работать.

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

Недостатки:

Неожиданные срабатывания: Иногда всплытие событий может привести к нежелательному поведению, когда события срабатывают на неожиданных элементах, что может сбить с толку разработчиков, если они не учитывают это поведение.

Как остановить всплытие?

Для того чтобы остановить всплытие события и не передавать его родителям, можно использовать метод event.stopPropagation(). Это предотвратит дальнейшее распространение события.

document.getElementById('child').addEventListener('click', function(event) {
  console.log('Child clicked');
  event.stopPropagation();  // Останавливаем всплытие
});

В этом случае событие не "всплывет" до родительского элемента, и обработчик на родителе не будет вызван.

Пример:

<div id="parent">
  <button id="child">Click me</button>
</div>

document.getElementById('parent').addEventListener('click', function() {
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', function(event) {
  console.log('Child clicked');
  event.stopPropagation(); // Останавливаем всплытие
});

Вывод будет следующим:

Child clicked

Здесь обработчик родителя не срабатывает, так как всплытие события было остановлено.

Важные моменты:

Поддержка браузерами: Всплытие событий поддерживается во всех современных браузерах, и это стандартное поведение в DOM.

event.target и event.currentTarget:

event.target — это элемент, на котором произошло событие.
event.currentTarget — это элемент, на котором установлен обработчик события.

document.getElementById('parent').addEventListener('click', function(event) {
  console.log(event.target);  // Элемент, на котором произошло событие
  console.log(event.currentTarget);  // Элемент, на котором установлен обработчик
});

Заключение

Всплытие событий — это важный механизм в JavaScript, который позволяет удобно управлять событиями в DOM-дереве. Использование всплытия событий эффективно для делегирования событий и управления поведением на сложных веб-страницах. Понимание того, как работает всплытие, и использование таких методов, как stopPropagation(), помогут вам контролировать обработку событий и избегать неожиданных результатов.

Предыдущий вопрос

Что такое всплытие событий в JavaScript и браузерах?

Следующий вопрос

Что такое захват событий (Event Capturing) в JavaScript и браузерах?

Содержание:

Пример всплытия события

Преимущества и недостатки всплытия событий

Как остановить всплытие?

Важные моменты:

Заключение

Редактировать