JavaScript: blur イベントと event.relatedTarget プロパティでフォーカス移動先の要素を取得する

2024-04-07

JavaScript イベント: 要素のフォーカス移動を追跡する

この解説では、JavaScript の blur イベントと、フォーカスが移動した先の要素を取得する方法について詳しく説明します。

blur イベントは、ユーザーが要素からフォーカスを外したときに発生します。これは、ユーザーが別の要素をクリックしたり、タブキーで別の要素に移動したり、ページ外をクリックしたりする場合に発生します。

フォーカス移動先の要素を取得する

blur イベントハンドラ内で、以下の方法を使用してフォーカス移動先の要素を取得できます。

event.relatedTarget プロパティを使用する

このプロパティは、フォーカスが移動した先の要素への参照を返します。

element.addEventListener('blur', (event) => {
  const focusedElement = event.relatedTarget;
  // フォーカス移動先の要素に対する処理
});

document.activeElement プロパティを使用する

element.addEventListener('blur', () => {
  const focusedElement = document.activeElement;
  // フォーカス移動先の要素に対する処理
});

フォーカス可能要素のリストをループする

ページ上のすべてのフォーカス可能要素のリストを作成し、blur イベントハンドラ内でそのリストをループすることができます。ループ処理の中で、document.activeElement プロパティを使用して、現在フォーカスを持っている要素を特定することができます。

const focusableElements = Array.from(document.querySelectorAll('[tabindex]'));

element.addEventListener('blur', () => {
  for (const element of focusableElements) {
    if (element === document.activeElement) {
      // フォーカス移動先の要素に対する処理
    }
  }
});

使用例

以下の例は、blur イベントを使用して、フォーカス移動先の要素を取得する方法を示しています。

<input id="input1" type="text" />
<input id="input2" type="text" />

<script>
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');

input1.addEventListener('blur', (event) => {
  const focusedElement = event.relatedTarget;
  if (focusedElement === input2) {
    console.log('フォーカスは input2 に移動しました');
  }
});

input2.addEventListener('blur', (event) => {
  const focusedElement = event.relatedTarget;
  if (focusedElement === input1) {
    console.log('フォーカスは input1 に移動しました');
  }
});
</script>

注意事項

event.relatedTarget プロパティは、一部のブラウザではサポートされていない場合があります。
フォーカス移動先の要素が別のウィンドウまたはフレームにある場合、event.relatedTarget プロパティは null を返します。

サンプルコード: フォーカス移動先の要素を取得する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォーカス移動先の要素を取得</title>
</head>
<body>
  <h1>サンプルコード: フォーカス移動先の要素を取得</h1>
  <p>
    <input id="input1" type="text" />
    <input id="input2" type="text" />
  </p>
  <script>
  const input1 = document.getElementById('input1');
  const input2 = document.getElementById('input2');

  input1.addEventListener('blur', (event) => {
    const focusedElement = event.relatedTarget;
    if (focusedElement === input2) {
      console.log('フォーカスは input2 に移動しました');
    }
  });

  input2.addEventListener('blur', (event) => {
    const focusedElement = event.relatedTarget;
    if (focusedElement === input1) {
      console.log('フォーカスは input1 に移動しました');
    }
  });
  </script>
</body>
</html>

動作説明

上記のコードを HTML ファイルとして保存し、ブラウザで開きます。
input1 にフォーカスを当てます。
Tab キーを押して input2 にフォーカスを移動します。
コンソールを確認すると、「フォーカスは input2 に移動しました」というメッセージが表示されます。

このサンプルコードは、以下のことを示しています:

blur イベントを使用して、フォーカスが移動したことを検知することができます。
event.relatedTarget プロパティを使用して、フォーカス移動先の要素を取得することができます。

フォーカス移動に合わせて、画面の表示を切り替える
フォーカス移動に合わせて、音声読み上げを行う

フォーカス移動先の要素を取得するその他の方法

document.querySelector() メソッドを使用して、フォーカス移動先の要素を直接取得することができます。

element.addEventListener('blur', () => {
  const focusedElement = document.querySelector(':focus');
  // フォーカス移動先の要素に対する処理
});

focusin イベントは、要素にフォーカスが移動したときに発生します。このイベントを使用して、フォーカス移動先の要素を取得することができます。

element.addEventListener('focusin', (event) => {
  const focusedElement = event.target;
  // フォーカス移動先の要素に対する処理
});

MutationObserver オブザーバーを使用して、DOM の変更を監視することができます。この方法を使用すると、フォーカス移動に伴う DOM の変更を検知し、フォーカス移動先の要素を取得することができます。

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'focus') {
      const focusedElement = mutation.target;
      // フォーカス移動先の要素に対する処理
    }
  }
});

observer.observe(document, {
  attributes: true,
  childList: true,
  subtree: true
});