Как отловить стадию погружения?

Отловление стадии погружения (Event Capturing Phase)

Event bubbling и capturing — фундаментальные концепции обработки событий в браузере. Погружение (capturing phase) происходит ДО того, как событие достигает целевого элемента. Это знание критично для построения надежных обработчиков событий.

Три стадии обработки события

Когда пользователь кликает на элемент, браузер проходит через три фазы:

1. Capturing Phase (Погружение) — событие спускается от document к целевому элементу
2. Target Phase — событие достигает самого элемента
3. Bubbling Phase (Всплытие) — событие поднимается от элемента обратно к document

        CAPTURING ↓  TARGET  ↑ BUBBLING
            document
              |
            body
              |
          container
              |
          target (клик)

Как отловить стадию погружения

В JavaScript используется третий параметр addEventListener — useCapture:

// Всплытие (по умолчанию, useCapture = false)
element.addEventListener('click', (event) => {
  console.log('Всплытие');
}, false);

// Погружение (useCapture = true)
element.addEventListener('click', (event) => {
  console.log('Погружение');
}, true);

// Или явно:
element.addEventListener('click', (event) => {
  console.log('Погружение');
}, { capture: true });

Пример: управление порядком обработки

const outer = document.querySelector('.outer');
const inner = document.querySelector('.inner');

// Погружение на outer (срабатывает ДО клика на inner)
outer.addEventListener('click', (event) => {
  console.log('Outer: погружение');
}, true);

// Клик на inner (целевая фаза)
inner.addEventListener('click', (event) => {
  console.log('Inner: клик');
});

// Всплытие на outer (срабатывает ПОСЛЕ клика на inner)
outer.addEventListener('click', (event) => {
  console.log('Outer: всплытие');
}, false);

// При клике на inner выведет:
// 1. "Outer: погружение" (capturing)
// 2. "Inner: клик" (target)
// 3. "Outer: всплытие" (bubbling)

Практический пример: модальное окно

Часто нужно закрыть модальное окно при клике вне его содержимого, но не внутри него. Погружение помогает перехватить это правильно:

function setupModal() {
  const modal = document.querySelector('.modal');
  const backdrop = document.querySelector('.modal-backdrop');
  const content = document.querySelector('.modal-content');

  // Начинаем отслеживать клики в погружении
  backdrop.addEventListener('click', (event) => {
    console.log('Клик на фоне');
    closeModal();
  }, true);

  // Предотвращаем закрытие при клике внутри контента
  content.addEventListener('click', (event) => {
    event.stopPropagation();
  }, true);
}

Когда использовать capturing

Используй capturing, когда нужно:

• Перехватить событие ДО целевого элемента (предварительная обработка)
• Отменить стандартное поведение на ранней стадии
• Реализовать глобальную обработку событий (как делают фреймворки)
• Управлять порядком обработки дочерних элементов

Обычно используется всплытие (bubbling), так как это интуитивнее — обработка происходит на целевом элементе.

Проверка фазы события

element.addEventListener('click', (event) => {
  if (event.eventPhase === Event.CAPTURING_PHASE) {
    console.log('Погружение');
  } else if (event.eventPhase === Event.TARGET_PHASE) {
    console.log('Целевая фаза');
  } else if (event.eventPhase === Event.BUBBLING_PHASE) {
    console.log('Всплытие');
  }
});

// Константы Event:
// Event.CAPTURING_PHASE = 1
// Event.TARGET_PHASE = 2
// Event.BUBBLING_PHASE = 3

Понимание capturing/bubbling — основа для эффективной обработки событий и предотвращения нежелательного поведения в сложных интерфейсах.