> Как работает всплытие и захват событий в JavaScript и какой обработчик сработает первым на div и кнопке (JavaScript)
Уровень: senior · Роль: frontend · Категория: Технические вопросы
Компании: Exness
Стек: JavaScript
> Пример ответа
Всплытие (bubbling) и захват (capturing) - это две фазы распространения события в DOM. Когда происходит событие, оно сначала проходит фазу захвата от корня документа до целевого элемента (сверху вниз), затем достигает целевого элемента (фаза цели), и после этого всплывает обратно к корню (снизу вверх).
По умолчанию обработчики срабатывают на фазе всплытия. Чтобы повесить обработчик на фазу захвата, третьим аргументом addEventListener передают true или объект { capture: true }.
Пример: есть структура <div><button>Click</button></div>. Если навесить обработчики без указания фазы (только всплытие), то при клике на кнопку первым сработает обработчик на кнопке (целевой элемент), затем на div. Если же на div повесить обработчик с capture: true, то первым сработает именно он (на фазе захвата), а потом уже кнопка.
Таким образом, порядок: сначала все обработчики захвата от корня к цели, затем обработчик на цели (в порядке назначения), затем все обработчики всплытия от цели к корню.
> Похожие задачи по frontend
Какие встроенные методы JavaScript помогают соединить строки с разделителем
Приведите пример разницы this и замыкания в JavaScript
Как определить элемент, по которому был произведен клик при делегировании событий в JavaScript
Как реализовать кэш с методами get, set, delete и clear с поддержкой TTL в JavaScript
> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?
Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью