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

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

Подія focusout виникає, коли елемент або будь-який з його нащадків втрачає фокус. Це схоже на подію blur, але головна відмінність полягає в тому, що focusout підтримує спливання (bubbling), тобто може бути оброблена не тільки на конкретному елементі, а й на його батьківських елементах.

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

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

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

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

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

Однією з ключових особливостей події focusout є її здатність до спливання. На відміну від події blur, що є більш локальною, focusout може поширюватися вгору по DOM-дереву, дозволяючи обробляти втрату фокусу зручніше і на вищому рівні DOM-ієрархії. Це дає можливість використовувати її на батьківських контейнерах, зекономивши час і ресурси на прив'язуванні кількох обробників до різних елементів.

Ще один приклад використання:

document.addEventListener('focusout', function(event) {
  event.target.style.border = '1px solid red';
});

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

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

правити

Порада

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

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

Порада

При використанні focusout, на відміну від blur, можна ефективно керувати подіями втрати фокусу для всіх вкладених елементів без необхідності додавання окремих обробників до кожного з них. Це підвищує ефективність коду в додатках з великою кількістю полів введення.

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

Порада

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

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<input type="password" id="password" value="" placeholder="Введи щось">
<form id="myForm">
    <label>Ім'я: <input type="text" name="name" value="Лесь"></label>
    <button type="submit">Надіслати</button>
</form>

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

form.addEventListener('focusout', function(event) {
  if (event.target.id === 'email') {
    document.getElementById('password').focus();
  }
});

<p>Клацни в поле і вийди з нього порожнім:</p>
<input type="text" placeholder="Обов'язкове поле">

document.querySelector('input').addEventListener('focusout', function (event) {
    if (event.target.value === '') {
        event.target.style.borderColor = 'red';
        console.log('Поле не повинно бути порожнім!');
    }
});