PassFront
  1. PassFront
  2. База знаний
  3. DOM и браузер

Всплывает ли событие focus?

DOM и браузер

Нет, событие `focus` не всплывает. Для отслеживания фокуса на уровне родителя используют всплывающее событие `focusin` (или `focus` с фазой погружения).

focus не всплывает

События focus и blur не всплывают (bubbling отсутствует). Обработчик на родителе не поймает фокус дочернего поля через обычное всплытие:

form.addEventListener('focus', handler); // НЕ сработает при фокусе поля внутри

Всплывающие аналоги

Для делегирования фокуса используют:

focusin / focusout — всплывают

form.addEventListener('focusin', handler);  // сработает при фокусе любого поля внутри
form.addEventListener('focusout', handler); // при потере фокуса

focus/blur с capture

Можно поймать на фазе погружения:

form.addEventListener('focus', handler, { capture: true });

Почему так

focus/blur не всплывают исторически — это поведение осталось для совместимости. focusin/focusout добавили именно чтобы дать всплытие для делегирования.

Практика

Для делегирования фокуса (валидация формы при выходе из поля) используют focusin/focusout.

Коротко для собеседования

Нет, focus (и blur) не всплывают. Для делегирования используют всплывающие focusin/focusout или focus/blur с { capture: true }. Это важно, когда нужен один обработчик на форме для фокуса любого её поля.

Другие вопросы раздела