JS властивість Event.focusin

Загальний опис

Подія focusin виникає, коли елемент або будь-який з його дочірніх елементів отримує фокус. Це схоже на подію focus, але з тією різницею, що focusin може спливати вгору по DOM-дереву, дозволяючи обробляти події фокусу не тільки на елементах, але й на їх контейнерах.

Уявіть, що у вас є форма з кількома полями. Якщо ви хочете відстежувати, коли будь-яке поле в цій формі отримує фокус, ви можете використати подію focusin на елементі форми. Це дозволить вам не прив'язувати окремий обробник для кожного поля форми, а натомість реагувати на фокус для всієї групи елементів.

Ось базовий приклад:

const form = document.querySelector('form');

form.addEventListener('focusin', function(event) {
  console.log('Поле отримало фокус:', event.target);
});

У цьому прикладі подія focusin реагує на будь-яке поле форми, яке отримує фокус, і виводить у консоль елемент, що його отримав.

Особливістю focusin є те, що вона спливає (bubbling), на відміну від події focus. Це означає, що ви можете повісити обробник на батьківський елемент і отримати доступ до всіх елементів, які фокусуються всередині нього, без необхідності прив’язувати обробники до кожного окремого поля.

Якщо вам потрібно робити щось подібне з елементами, які втрачають фокус, використовуйте подію focusout, яка також має можливість спливання.

Ще один приклад:

document.addEventListener('focusin', function(event) {
  event.target.style.backgroundColor = 'lightyellow';
});

Цей код змінює фон елемента, який отримав фокус, на жовтий.

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

правити

Порада

Наскільки зручно використовувати focusin, настільки слід бути обережним з його спливанням. Якщо обробник на батьківському елементі виконує важкі операції, це може уповільнити роботу при частому переході між елементами.

автор: Bond правити

Порада

У складних формах можна створювати умовну логіку на основі типу елемента, що отримав фокус. Наприклад, якщо фокус переміщується між текстовими полями, виконувати одну дію, а якщо фокус переходить на кнопки або чекбокси — іншу.

автор: Bond правити

Порада

Використовуйте focusin в поєднанні з event.target для більш точного контролю над тим, який елемент був активований, і відповідної реакції в залежності від типу або контенту елемента.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('focusin', function(event) {
  // Код, що виконується при спрацюванні події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

document.addEventListener('focusin', function(event) {
  if (event.target.tagName === 'BUTTON') {
    event.target.style.borderColor = 'green';
  }
});

<div id="complexForm">Демонстраційний елемент</div>

const form = document.querySelector('#complexForm');

form.addEventListener('focusin', function(event) {
  if (event.target.tagName === 'INPUT' && event.target.type === 'text') {
    console.log('Фокус на текстовому полі:', event.target.name);
  }
});