Как работает всплытие?

Event Bubbling — Всплытие событий в DOM

1. Три фазы обработки события

События в DOM проходят три фазы:

// 1. Capturing (захват) - сверху вниз
// document -> html -> body -> div -> button

// 2. Target (цель) - обработка на целевом элементе
// Событие сработало на нажатой кнопке

// 3. Bubbling (всплытие) - снизу вверх
// button -> div -> body -> html -> document

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

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

parent.addEventListener('click', (e) => {
  console.log('Parent clicked'); // Выполнится!
});

child.addEventListener('click', (e) => {
  console.log('Child clicked'); // Выполнится первым
});

// Вывод при клике на кнопку:
// Child clicked
// Parent clicked

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

Используй event.stopPropagation():

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

parent.addEventListener('click', () => {
  console.log('Parent');
});

child.addEventListener('click', (e) => {
  console.log('Child');
  e.stopPropagation(); // Остановить всплытие!
});

// Вывод:
// Child
// (Parent не выполнится)

4. stopImmediatePropagation() — полная остановка

Предотвращает вызов других обработчиков на этом же элементе:

const button = document.getElementById('button');

button.addEventListener('click', (e) => {
  console.log('Handler 1');
  e.stopImmediatePropagation();
});

button.addEventListener('click', () => {
  console.log('Handler 2'); // Не выполнится
});

// Вывод:
// Handler 1

5. Capturing vs Bubbling

Третий параметр addEventListener контролирует фазу:

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

// Bubbling (по умолчанию, false)
parent.addEventListener('click', () => {
  console.log('Parent (bubbling)');
}, false);

// Capturing (true)
parent.addEventListener('click', () => {
  console.log('Parent (capturing)');
}, true);

// При клике на child:
// Parent (capturing) <- первая фаза
// Parent (bubbling)  <- третья фаза

6. Event Delegation — делегирование событий

Используем всплытие для эффективной обработки:

// Вместо добавления слушателя к каждому элементу
const list = document.getElementById('list');

list.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('Клик на:', e.target.textContent);
  }
});

7. События, которые НЕ всплывают

Некоторые события не всплывают:

// События, которые НЕ всплывают:
// - focus, blur
// - load, unload
// - scroll
// - mouseenter, mouseleave
// - play, pause
// - resize

// События, которые всплывают:
// - click
// - dblclick
// - mousedown, mouseup
// - input, change
// - submit
// - keydown, keyup

8. Практический пример: form submission

const form = document.getElementById('myForm');
const input = form.querySelector('input');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  console.log('Форма отправлена');
});

input.addEventListener('input', (e) => {
  console.log('Значение:', e.target.value);
  // Событие всплывет до form
});

Всплытие — это мощный механизм для обработки событий эффективно и создания делегирования обработчиков.