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 особливо корисний для відстеження взаємодії з формами та інтерфейсами з багатьма елементами вводу, оскільки він дозволяє централізувати логіку обробки подій.
| Порада: | При використанні |
| Порада: | Якщо ви працюєте з формами або іншими складними інтерфейсами, використання |
| Порада: | Пам'ятайте, що |
Синтаксис
element.addEventListener('focusout', function(event) {
// Код, що виконується при спрацюванні події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Користувач взаємодіє з полями форми, і коли фокус втрачається з будь-якого поля вводу, перевіряється, чи це поле порожнє. Якщо поле порожнє, під ним з'являється повідомлення про помилку, яке попереджає користувача про необхідність заповнення. Це забезпечує базову валідацію форми на стороні клієнта, покращуючи користувацький досвід та взаємодію з інтерфейсом.
У цьому прикладі поле отримує червону обводку і повідомлення в консолі, якщо користувач намагається залишити його порожнім після втрати фокусу. Це корисно для валідації форм без відправлення даних на сервер.
document.querySelector('input').addEventListener('focusout', function(event) {
if (event.target.value === '') {
event.target.style.borderColor = 'red';
console.log('Поле не повинно бути порожнім!');
}
});Цей приклад демонструє автоматичне перемикання фокусу на поле "Пароль" після того, як користувач втратив фокус з поля "Email". Це може бути корисно для покращення зручності користування формою та швидкого переміщення між полями.
const form = document.querySelector('#myForm');
form.addEventListener('focusout', function(event) {
if (event.target.id === 'email') {
document.getElementById('password').focus();
}
});