Сработают ли при клике нескольких callback при добавлении события на вложенные блоки

Механизм обработки событий при вложенных элементах

Да, при клике на вложенный блок сработают все callback-функции, зарегистрированные как на самом элементе, так и на его родителях (включая document), если не будет явной остановки всплытия события. Это происходит из-за механизма Event Propagation, который состоит из трех фаз:

1. Capture Phase (фаза захвата) — событие движется от window до целевого элемента.
2. Target Phase (фаза цели) — событие достигло целевого элемента.
3. Bubbling Phase (фаза всплытия) — событие поднимается от целевого элемента к window.

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

<div id="parent">
  <button id="child">Нажми меня</button>
</div>

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

// Обработчик на родительском элементе
parent.addEventListener('click', () => {
  console.log('Клик на родителе (всплытие)');
});

// Обработчик на дочернем элементе
child.addEventListener('click', (e) => {
  console.log('Клик на кнопке (целевой элемент)');
});

// Обработчик на document с фазой захвата
document.addEventListener('click', () => {
  console.log('Клик на document (захват)');
}, true);

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

Клик на document (захват)
Клик на кнопке (целевой элемент)
Клик на родителе (всплытие)

Ключевые аспекты обработки событий:

По умолчанию работает всплытие:

• Если не указать третий параметр в addEventListener, используется фаза всплытия (false)
• Обработчики на родительских элементах выполняются после обработчика на целевом элементе

Управление распространением события:

child.addEventListener('click', (e) => {
  e.stopPropagation(); // Останавливает всплытие
  e.stopImmediatePropagation(); // Останавливает и всплытие, и другие обработчики на этом элементе
  e.preventDefault(); // Отменяет стандартное поведение браузера
});

Порядок выполнения:

• На одном элементе обработчики выполняются в порядке их регистрации
• Обработчики фазы захвата выполняются до обработчиков фазы всплытия
• Если событие не должно всплывать, нужно явно вызвать stopPropagation()

Особенности и best practices:

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

   document.getElementById('list').addEventListener('click', (e) => {
     if (e.target.tagName === 'LI') {
       console.log('Клик на элементе списка:', e.target.textContent);
     }
   });
   

2. Будьте осторожны с stopPropagation() — это может сломать логику других библиотек или плагинов

3. Отмена стандартного поведения (preventDefault) и остановка всплытия — разные операции

4. Пассивные обработчики для улучшения производительности:

   element.addEventListener('touchstart', handler, { passive: true });
   

Понимание механизма распространения событий критически важно для создания корректной интерактивности в веб-приложениях, особенно при работе со сложными компонентами и сторонними библиотеками.