Какие события отлавливают фокус?

Фокус отлавливают события: `focus`/`blur` (не всплывают, на самом элементе) и `focusin`/`focusout` (всплывают, для делегирования).

События фокуса

focus / blur (не всплывают)

• focus — элемент получил фокус.
• blur — элемент потерял фокус.

input.addEventListener('focus', () => {});
input.addEventListener('blur', () => {});

Не всплывают — обработчик на родителе не поймает фокус потомка через обычное всплытие (только через capture: true).

focusin / focusout (всплывают)

• focusin — получение фокуса (всплывает).
• focusout — потеря фокуса (всплывает).

form.addEventListener('focusin', () => {}); // ловит фокус любого поля внутри

Всплывают — для делегирования (один обработчик на форме для всех полей).

Главное различие

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

Дополнительно

• focus/blur на фазе погружения ({ capture: true }) тоже могут ловить фокус потомков.
• document.activeElement — текущий сфокусированный элемент.
• Псевдоклассы: :focus, :focus-within, :focus-visible.

Практика

• Валидация поля при потере фокуса → blur/focusout.
• Делегирование фокуса на форме → focusin/focusout.

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

Фокус отлавливают: focus/blur (получение/потеря фокуса, не всплывают — на конкретном элементе или через capture) и focusin/focusout (всплывают — для делегирования на родителе, например валидация полей формы). Текущий фокус — document.activeElement; псевдоклассы :focus/:focus-within.