Почему событие клика по кнопке срабатывает и на родительском элементе?

Проблема всплытия событий (Event Bubbling)

Ваш вопрос касается фундаментального механизма в DOM (Document Object Model) под названием всплытие событий (Event Bubbling). Это один из трех фаз распространения событий в браузере.

Три фазы распространения события:

1. Фаза захвата (Capture Phase): Событие движется от корня документа (window) вниз по иерархии DOM к целевому элементу.
2. Целевая фаза (Target Phase): Событие достигло целевого элемента, на котором произошло действие (например, клик).
3. Фаза всплытия (Bubbling Phase): Событие поднимается обратно от целевого элемента вверх по иерархии DOM к корню.

По умолчанию обработчики событий, добавленные через addEventListener, срабатывают на фазе всплытия. Именно поэтому клик по кнопке (дочерний элемент) вызывает обработчики, прикрепленные как к самой кнопке, так и ко всем ее родительским элементам (например, к div, form или body).

Практический пример

Рассмотрим простую HTML-структуру:

<div id="parent" style="padding: 20px; background: lightblue;">
  Я родительский элемент
  <button id="child">Я кнопка</button>
</div>

И соответствующий JavaScript-код:

const parent = document.getElementById('parent');
const child = document.getElementById('child');

// Обработчик для родительского элемента
parent.addEventListener('click', function(event) {
  console.log('Сработал родитель (div)');
});

// Обработчик для дочернего элемента (кнопки)
child.addEventListener('click', function(event) {
  console.log('Сработала кнопка (button)');
});

// Также можно добавить обработчик на документ
document.addEventListener('click', function() {
  console.log('Сработал документ');
});

Что произойдет при клике на кнопку? В консоли вы увидите:

Сработала кнопка (button)
Сработал родитель (div)
Сработал документ

Порядок вывода наглядно демонстрирует всплытие: событие начинает обработку с целевого элемента (button), затем поднимается к его родителю (div), и далее вверх по дереву.

Как управлять этим поведением?

1. Остановка всплытия: event.stopPropagation()

Чтобы предотвратить дальнейшее всплытие события и выполнение обработчиков на родительских элементах, используется метод stopPropagation() объекта события.

child.addEventListener('click', function(event) {
  console.log('Сработала кнопка (button)');
  event.stopPropagation(); // Всплытие остановлено здесь
});

// Теперь при клике на кнопку в консоли будет только:
// Сработала кнопка (button)

2. Использование фазы захвата

Можно зарегистрировать обработчик на фазе захвата, передав третий аргумент true в addEventListener. Тогда обработчик родителя сработает до обработчика кнопки.

parent.addEventListener('click', function() {
  console.log('Родитель (фаза захвата)');
}, true); // true = слушатель на фазе захвата

child.addEventListener('click', function() {
  console.log('Кнопка (фаза всплытия)');
});

// Вывод при клике на кнопку:
// Родитель (фаза захвата)
// Кнопка (фаза всплытия)

3. Немедленная остановка: event.stopImmediatePropagation()

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

4. Предотвращение поведения по умолчанию: event.preventDefault()

Важно не путать этот метод с stopPropagation(). preventDefault() отменяет стандартное действие браузера (например, переход по ссылке, отправку формы), но не останавливает всплытие события.

Паттерны и лучшие практики

• Делегирование событий (Event Delegation): Всплытие активно используется в этом мощном паттерне. Вместо назначения обработчиков множеству дочерних элементов, один обработчик вешается на общего родителя. Это улучшает производительность и упрощает работу с динамически добавляемыми элементами.

  // Один обработчик на списке вместо многих на каждом элементе
  document.getElementById('myList').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log('Кликнули на элемент списка:', event.target.textContent);
    }
  });
  

• Аккуратное использование stopPropagation(): Беспорядочная остановка всплытия может нарушить работу других библиотек или вашего собственного кода, которые полагаются на этот механизм. Используйте этот метод обдуманно.

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