特定要素内にフォーカスした時のイベントを設定する

特定の要素内にフォーカスした時に処理をしたいということがあったので、実装方法について調べたことをメモ。

サンプルコード

以下の例で、.target内の要素にフォーカスしたときに処理を行いたいとします。

<div class="target" tabindex="0">
  <ul>
    <li><a href="#">リンク</a></li>
  </ul>
  <input type="text">
  <button>ボタン</button>
</div>

特定の要素内にフォーカスしたときはfocusin、フォーカスが外れた時はfocusoutでイベントの設定ができるようです。

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

target.addEventListener('focusin', function(e) {
  console.log('focusin', e.target, e.relatedTarget);
});
target.addEventListener('focusout', function(e) {
  console.log('focusout', e.target, e.relatedTarget);
});

focusinとfocusoutのデモページ

focusinの場合、event.targetで現在のフォーカス要素、event.relatedTargetでひとつ前にフォーカスしていた要素(ない場合はnull)を取得できるようです。
focusoutの場合は逆で、event.targetではひとつ前にフォーカスしていた要素、event.relatedTargetでは現在のフォーカス要素(ない場合はnull)を取得できます。