Вопрос с собеседования · Frontend

Что такое всплытие и перехват событий и как работает делегирование?

JuniorБраузер и DOM
Ещё спрашивают так:
  • Чем event.target отличается от event.currentTarget?
  • Что делают stopPropagation и preventDefault?
Коротко

Событие проходит три фазы: перехват (от window вниз к цели), цель, всплытие (от цели вверх). Обработчики по умолчанию срабатывают на всплытии. Делегирование — один обработчик на родителе ловит события детей через всплытие и определяет источник по event.target (или closest).

  • target — где произошло событие, currentTarget — чей обработчик сработал
  • stopPropagation — остановить распространение, preventDefault — отменить действие браузера (отправку формы, переход по ссылке)
  • Делегирование работает и для элементов, добавленных позже

А ещё Не всплывают focus, blur, mouseenter — есть всплывающие focusin, focusout

Подробно

Фазы. addEventListener(type, fn, { capture: true }) вешает обработчик на фазу перехвата. Полезно, когда нужно перехватить событие раньше дочерних обработчиков.

Делегирование экономит обработчики (таблица на тысячу строк — один обработчик вместо тысячи) и автоматически покрывает динамически добавленные элементы. closest нужен, потому что клик мог прийти во вложенный элемент кнопки (иконку).

Опции addEventListener: once — снять после первого срабатывания; passive: true — обещание не вызывать preventDefault, позволяет браузеру прокручивать без задержки (важно для touch и wheel); signal — снять обработчик через AbortController.

Утечки: обработчики на долгоживущих элементах (window, document), не снятые при удалении компонента.

Пример

list.addEventListener("click", (e) => {
  const btn = e.target.closest("button[data-id]");
  if (!btn || !list.contains(btn)) return;
  removeItem(btn.dataset.id);
});

form.addEventListener("submit", (e) => {
  e.preventDefault();          // не перезагружать страницу
  send(new FormData(form));
});

Что хотят услышать

  • Три фазы распространения.
  • Делегирование и target.
  • stopPropagation и preventDefault.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Обработчики по умолчанию срабатывают на фазе перехвата, а всплытие нужно включать
  • ✗event.currentTarget — элемент, где событие произошло, а target — тот, где висит обработчик
  • ✗Делегирование не работает для динамически добавленных элементов
  • ✓Перехват, цель, всплытие; делегирование — один обработчик на родителе и event.target

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования