Всплытие, погружение, делегирование
Вопрос
Как событие проходит по дереву и что такое делегирование?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
три фазы: погружение, цель, всплытие
по умолчанию обработчик срабатывает на всплытии
третий аргумент true или capture: true переводит в фазу погружения
stopPropagation прерывает дальнейший проход
preventDefault отменяет действие браузера, но не распространение
делегирование: один обработчик на контейнере, цель определяется через target.closest
Что могут спросить следом
- Какие события не всплывают
- Чем stopPropagation отличается от stopImmediatePropagation
- Как React использует делегирование внутри себя
Разбор
Событие сначала идёт сверху вниз до цели (погружение), срабатывает на ней,
затем поднимается обратно (всплытие). Обычный addEventListener слушает всплытие; чтобы
поймать раньше всех, нужен { capture: true }.
stopPropagation останавливает дальнейшее движение, preventDefault отменяет поведение
браузера по умолчанию (переход по ссылке, отправку формы) - это разные вещи, и часто нужен
только второй.
Делегирование - один обработчик на общем предке вместо сотни на элементах: определяем
источник через e.target.closest('.item'). Это и экономия памяти, и работа с элементами,
добавленными позже.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.