> В каком порядке сработают обработчики при клике на кнопку в DOM с вложенностью div, form, button (JavaScript)

Короткий ответ

При клике на кнопку обработчики сработают в порядке всплытия (bubbling) по умолчанию: сначала на button, затем на form, потом на div. Если на каком-то уровне обработчик вызовет stopPropagation(), всплытие прекратится. Фаза capture (погружения) срабатывает в обратном порядке - от document к button, но для этого нужно явно указать третий параметр addEventListener как true.

Подробное объяснение

DOM-события проходят три фазы: capture (погружение от document к цели), target (достижение цели) и bubbling (всплытие обратно). По умолчанию обработчики срабатывают на фазе bubbling. Для вложенности div > form > button при клике на button порядок будет:

1. Фаза capture (если есть обработчики с { capture: true }): div → form → button
2. Фаза target: button (все обработчики на button, независимо от флага capture)
3. Фаза bubbling: button → form → div

Если обработчик на button вызывает event.stopPropagation(), то всплытие на form и div не произойдет. event.stopImmediatePropagation() дополнительно предотвратит выполнение других обработчиков на том же элементе.

На практике

В реальных проектах важно понимать порядок всплытия для корректной обработки событий, особенно при использовании делегирования. Например, если на div висит обработчик клика для всех вложенных элементов, а на button - специфичное действие, вызов stopPropagation() на button может сломать логику делегирования. Лучше проверять event.target в обработчике на родителе, чем полагаться на всплытие без контроля.

Пример кода

HTML
<div id="parent">
  <form id="form">
    <button id="btn">Click me</button>
  </form>
</div>

<script>
  document.getElementById('parent').addEventListener('click', () => console.log('div bubbling'));
  document.getElementById('form').addEventListener('click', () => console.log('form bubbling'));
  document.getElementById('btn').addEventListener('click', () => console.log('button target'));

  // capture фаза
  document.getElementById('parent').addEventListener('click', () => console.log('div capture'), true);
  document.getElementById('form').addEventListener('click', () => console.log('form capture'), true);
  document.getElementById('btn').addEventListener('click', () => console.log('button capture'), true);

  // Вывод при клике: div capture → form capture → button target → button capture → button bubbling → form bubbling → div bubbling
</script>

Как отвечать на собеседовании

Начни с чёткого ответа: сначала button, потом form, потом div. Затем объясни фазы события, упомяни разницу между capture и bubbling. Покажи понимание stopPropagation и stopImmediatePropagation. Приведи пример из практики, когда это знание важно (делегирование, модальные окна). Не углубляйся в детали реализации в разных браузерах, если не спросят.

Что проверяет интервьюер

Интервьюер оценивает знание event propagation model в DOM, понимание фаз события, умение применять это на практике. Для senior-уровня важно не просто перечислить порядок, а показать осознание trade-off при использовании stopPropagation, влияние на производительность и архитектуру приложения. Также проверяется способность объяснить сложную тему простыми словами.

Типичные ошибки

• Путаница между capture и bubbling, особенно порядок срабатывания на фазе target
• Утверждение, что stopPropagation предотвращает все обработчики на текущем элементе (это делает только stopImmediatePropagation)
• Игнорирование того, что обработчики на фазе capture срабатывают до target фазы
• Непонимание, что порядок зависит от того, на какой фазе добавлен обработчик, а не от порядка в коде