В каком порядке выполняются обработчики событий?

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

В JavaScript события проходят три фазы: перехват (capturing), цель (target) и всплытие (bubbling). Это стандартная модель DOM Events, которая определяет, в каком порядке вызываются обработчики, когда происходит событие на вложенном элементе.

Фазы события

• Фаза перехвата (capturing): событие движется от корневого элемента (document) к целевому элементу. Обработчики, установленные с третьим параметром true в addEventListener, срабатывают на этой фазе.
• Фаза цели (target): событие достигает элемента, на котором произошло. Обработчики, назначенные непосредственно на этом элементе, выполняются в порядке их добавления.
• Фаза всплытия (bubbling): событие поднимается обратно от целевого элемента к корню. Большинство обработчиков (по умолчанию) срабатывают именно на этой фазе.

Пример кода

// HTML: <div id="parent"><button id="child">Click</button></div>

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

// Фаза перехвата
parent.addEventListener('click', () => console.log('Parent capturing'), true);

// Фаза всплытия (по умолчанию)
parent.addEventListener('click', () => console.log('Parent bubbling'));

// Фаза цели
child.addEventListener('click', () => console.log('Child target'));

// При клике на кнопку вывод:
// Parent capturing
// Child target
// Parent bubbling

Практическое применение

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

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