В какой момент обычно отлавливается событие

В какой момент обычно отлавливается событие

В браузере события проходят через несколько фаз: захвата (capturing), целевую (target) и всплытия (bubbling). Момент отловления зависит от того, на какой фазе мы регистрируем слушатель события.

Фазы события (Event Flow)

// HTML структура
// <div id="parent">
//   <button id="child">Нажми</button>
// </div>

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

// Фаза 1: CAPTURING (Захват) - идёт от корня вниз
parent.addEventListener('click', () => {
  console.log('1. Parent CAPTURING');
}, true);

// Фаза 2: TARGET - достигает целевого элемента
child.addEventListener('click', () => {
  console.log('2. Child TARGET');
});

// Фаза 3: BUBBLING (Всплытие) - идёт от элемента вверх
parent.addEventListener('click', () => {
  console.log('3. Parent BUBBLING');
});

Где обычно отлавливается событие

По умолчанию addEventListener регистрирует события на фазе всплытия (bubbling):

// Это одно и то же
document.addEventListener('click', handler);
document.addEventListener('click', handler, false);

// Для захвата нужно явно указать true
document.addEventListener('click', handler, true);

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

Пример 1: Event Delegation (Всплытие)

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

list.addEventListener('click', (event) => {
  if (event.target.classList.contains('delete')) {
    const item = event.target.closest('li');
    item?.remove();
  }
});

Пример 2: Захват для перехвата (Capturing)

const form = document.querySelector('form');

form.addEventListener('focus', (event) => {
  console.log('Захвачено фокусировкой на:', event.target.name);
}, true);

stopPropagation() и stopImmediatePropagation()

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

button.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('Клик на кнопке');
});

Итоговое правило

По умолчанию событие отлавливается на фазе всплытия (bubbling). Это самый удобный и эффективный способ для большинства задач.