Focusin и focusout: наблюдение за фокусом группы

Назначение

Всплывающие события focusin и focusout позволяют следить за переходами фокуса на уровне контейнера. Это полезно для группы полей, где не хочется подключать отдельную логику к каждому элементу.

Как это работает

Создайте область id focus-group с двумя подписанными полями. RelatedTarget у focusout помогает отличить переход к другому полю этой группы от ухода наружу. Пример не перемещает фокус принудительно.

Пример

const group = document.querySelector("#focus-group");
group.addEventListener("focusin", event => console.log("Фокус в группе:", event.target.id));
group.addEventListener("focusout", event => {
  const next = event.relatedTarget;
  if (next instanceof Node && group.contains(next)) return;
  console.log("Фокус покинул группу");
});

Что должно получиться

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

Граница применения и частая ошибка

Поддержку и порядок событий проверяйте в целевых браузерах. Focus и blur не всплывают, но для наблюдения с предка можно использовать фазу захвата. RelatedTarget иногда отсутствует; не считайте null доказательством конкретного пользовательского намерения.

Самостоятельная проверка

Пройдите поля Tab и Shift+Tab, затем нажмите внешнюю кнопку. Сравните с обработчиками focus и blur в capture-фазе. Если нужно лишь визуальное выделение группы, сначала рассмотрите CSS :focus-within.

Связанные материалы

• События
• Отложенная обработка ввода
• Клавиатура