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 відстежує, куди перемістився фокус, коли користувач залишив поле введення. Якщо фокус перейшов на інший елемент, це відображається в консолі, інакше відзначається, що фокус був втрачений.

правити

Порада

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

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

Порада

Щоб уникнути повторної обробки подій, можна порівняти попередній елемент фокусування з поточним за допомогою relatedTarget. Це може бути корисно, наприклад, у випадках, коли потрібно уникнути зайвих перезавантажень компонентів або повторного запуску анімацій.

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

Порада

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

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

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

Синтаксис

event.relatedTarget

Переглядачі

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

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

Переглядач
	26	24	7	15	12

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

Переглядач
	4.4	26	24	7

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

Переглядач
	-	-

Приклади

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

<div id="dialog">Демонстраційний елемент</div>
<button id="closeButton">Закрити</button>

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("Діалогове вікно закрите через втрату фокусу.");
  }
});

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

const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');

input1.addEventListener('focusout', function(event) {
  if (event.relatedTarget === input2) {
    console.log("Фокус перемістився з першого поля на друге.");
  } else {
    console.log("Фокус залишив перше поле.");
  }
});