event.currentTarget.blur()とは？使い方を解説します！【JavaScript】

event.currentTarget.blur()は、現在のイベントハンドラが関連付けられている要素のフォーカスを外すメソッドです。

この記事ではJavaScriptの『event.currentTarget.blur()』について、以下の内容をサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

  • event.currentTarget.blur()とは
  • event.currentTargetとは
  • event.currentTarget.blur()の使い方

event.currentTarget.blur()とは

event.currentTarget.blur()は、JavaScriptにおけるイベント処理の中で、現在のイベントハンドラが関連付けられている要素event.currentTargetのフォーカスを外すために使用されます。このメソッドは、ボタンやフォーム要素がクリックされた後にフォーカスを自動的に解除し、誤った操作を防ぐのに役立ちます。

blurメソッドとは

blurメソッドは、要素にフォーカスがある状態からそのフォーカスを解除するために使われます。通常、<input>や<button>などのフォーム要素に適用されます。

event.currentTargetとは

event.currentTargetは、現在のイベントハンドラが関連付けられている要素を指します。これはイベントが発生した要素（event.target）と異なることがあります。たとえば、親要素にイベントハンドラがバインドされていて、子要素でイベントが発生した場合、event.currentTargetは親要素を指し、event.targetは子要素を指します。

以下のHTMLでは子要素（<button>要素）でイベントが発生していますが、イベントハンドラが親要素（<div>要素）に関連づけられているので、子要素（<button>要素）をクリックした場合、event.targetは子要素（<button>要素）になりますが、event.currentTargetは親要素（<div>要素）になります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event.targetとevent.currentTargetの違い</title>
</head>
<body>

<div id="parentDiv">
    <button>クリックしてください</button>
</div>

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

    parentDiv.addEventListener('click', function(event) {
        console.log('event.target:', event.target); // クリックされた要素（button）
        console.log('event.currentTarget:', event.currentTarget); // イベントハンドラがバインドされた要素（div）
    });
</script>

</body>
</html>

event.currentTarget.blur()の使い方

以下は、ボタンをクリックするとevent.currentTarget.blur()が呼び出され、自動的にフォーカスが外れるサンプルコードです。クリック後に、ボタンの背景色が白に戻り、フォーカスが解除されたことを視覚的に確認できます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>event.currentTarget.blurのサンプル</title>
    <style>
      /* フォーカス時のスタイル */
      button:focus {
        background-color: lightblue; /* 水色 */
        border: 2px solid blue;
      }
      /* 通常時のスタイル */
      button {
        background-color: white;
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <button id="blurButton">クリックしてフォーカスを外す</button>

    <script>
      const button = document.getElementById('blurButton');

      button.addEventListener('click', function (event) {
        // フォーカスを外す
        event.currentTarget.blur();
      });

      button.addEventListener('focus', function () {
        console.log('ボタンがフォーカスされました');
      });

      button.addEventListener('blur', function () {
        console.log('フォーカスが外れました');
      });
    </script>
  </body>
</html>

サンプルコードの解説

  • HTML
    • <button>要素でボタンを作成しています。このボタンは、ユーザーがクリックすることでフォーカスされます。
  • CSS
    • フォーカス時に背景色が水色に変わり、枠線が青色になります。フォーカスが外れると元の白色に戻ります。
  • JavaScript
    • クリックされた瞬間にevent.currentTarget.blur()が呼び出され、フォーカスが解除されます。
    • ボタンがフォーカスされたときに、コンソールに「ボタンがフォーカスされました」と表示されます。
    • フォーカスが外れた際に、コンソールに「フォーカスが外れました」と表示されます。
  1. ユーザーがボタンをクリックします。
  2. クリックされたボタンにフォーカスが当たり、focusイベントが発生してコンソールに「ボタンがフォーカスされました」と表示され、背景色が水色に変わります。
  3. その後、event.currentTarget.blur()が呼び出され、ボタンのフォーカスが即座に外れ、背景色が白に戻り、コンソールに「フォーカスが外れました」と表示されます。
  4. 上記のサンプルコードからevent.currentTarget.blur()を削除したりコメントアウトしたりすると、ボタンをクリックしても背景色が水色（lightblue）のままになります。

event.currentTarget.blur()を使う理由

特定の状況では、ボタンやフォーム要素がクリックされた後にフォーカスが残ると、誤操作が発生する可能性があります。具体的な例を以下に示します。

具体的な例

  • フォーム送信ボタン
    • あるフォームの「送信」ボタンをクリックしたとします。通常、この操作でフォームは送信されますが、ボタンにフォーカスが残る場合、キーボードのスペースキーやエンターキーを押すと再度ボタンがアクティブになり、もう一度フォームが送信されてしまうことがあります。このような誤操作を防ぐために、event.currentTarget.blur()でフォーカスを解除すると、誤って再送信されることを防ぐことができます。
  • モーダルウィンドウの閉じるボタン
    • モーダルウィンドウで「閉じる」ボタンをクリックした後、そのボタンにフォーカスが残ると、ユーザーがキーボードで何か操作しようとしたときに、再度モーダルが不必要に操作される場合があります。event.currentTarget.blur()でフォーカスを解除することで、モーダルが閉じた後の次のアクションを意図せずにトリガーすることがなくなります。

本記事のまとめ

この記事では『event.currentTarget.blur()』について、以下の内容を説明しました。

  • event.currentTarget.blur()とは
  • event.currentTargetとは
  • event.currentTarget.blur()の使い方

お読み頂きありがとうございました。