JS властивість Event.relatedTarget (Focus)
Загальний опис
relatedTarget — це властивість об'єкта FocusEvent, яка містить посилання на елемент, з якого або на який переміщений фокус під час подій, пов'язаних із фокусуванням, таких як focusin, focusout, blur або focus. Для подій focusin і focus ця властивість вказує на елемент, з якого фокус перемістився, а для focusout і blur — на елемент, на який фокус перейшов.
Ця властивість особливо корисна при роботі з формами або складними інтерфейсами, коли важливо знати, звідки був втрачений або куди переміщений фокус. Наприклад, при створенні кастомних валідацій форм або динамічного перемикання елементів, знання попереднього елемента фокусування може допомогти в реалізації специфічної логіки поведінки.
Варто зазначити, що relatedTarget може бути null у випадках, коли фокус переміщений на інший елемент або за межі документа, наприклад, коли користувач натискає іншу вкладку браузера. Це важливо враховувати, щоб уникнути помилок при обробці фокусу.
Приклад використання:
inputElement.addEventListener('focusout', function(event) {
if (event.relatedTarget) {
console.log("Фокус перемістився на елемент: ", event.relatedTarget);
} else {
console.log("Фокус втрачений.");
}
});
У цьому прикладі подія focusout відстежує, куди перемістився фокус, коли користувач залишив поле введення. Якщо фокус перейшов на інший елемент, це відображається в консолі, інакше відзначається, що фокус був втрачений.
| Порада: | Зручно використовувати |
| Порада: | Щоб уникнути повторної обробки подій, можна порівняти попередній елемент фокусування з поточним за допомогою |
| Порада: | Для випадаючих меню або діалогових вікон можна використовувати |
Синтаксис
event.relatedTargetЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
26 |
24 |
7 |
15 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
26 |
24 |
7 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач може переміщувати фокус між двома полями та кнопкою. При кожній зміні фокусу виводиться інформація про те, з якого елемента фокус перейшов на інший, використовуючи властивість FocusEvent -> relatedTarget. Це допомагає показати, як можна відслідковувати переміщення фокусу та застосовувати цю інформацію у взаємодії з формами або іншими елементами сторінки.
У цьому прикладі, коли користувач виходить з першого поля вводу, відстежується, чи фокус перемістився на друге поле. Це може бути корисним для кастомних перевірок або валідацій при переміщенні між полями форми.
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
input1.addEventListener('focusout', function(event) {
if (event.relatedTarget === input2) {
console.log("Фокус перемістився з першого поля на друге.");
} else {
console.log("Фокус залишив перше поле.");
}
});Цей приклад показує, як закрити діалогове вікно, якщо фокус перемістився за межі його вмісту. Використання relatedTarget дозволяє точно визначити, чи фокус вийшов за межі діалогового елемента, що допомагає контролювати його видимість.
const dialog = document.getElementById('dialog');
const closeButton = document.getElementById('closeButton');
dialog.addEventListener('focusout', function(event) {
if (!dialog.contains(event.relatedTarget)) {
dialog.style.display = 'none';
console.log("Діалогове вікно закрите через втрату фокусу.");
}
});