JavaScriptとjQueryでプログラミングをレベルアップ！「blur」と「focusout」を使いこなして、インタラクティブなWebサイトを作ろう

2024-05-22

JavaScriptとjQueryにおける「blur」と「focusout」の違い

JavaScriptとjQueryで、要素にフォーカスが失われたときに発生するイベントとして「blur」と「focusout」があります。一見同じように見えますが、実は重要な違いがあります。

「blur」と「focusout」の違い

発生タイミング:
- blur: フォーカスが失われた要素自身で発生します。
- focusout: フォーカスが失われた要素自身 または その子要素で発生します。
バブリング:
- blur: バブリングしません。つまり、イベントは発生した要素のみで処理されます。
- focusout: バブリングします。つまり、イベントは発生した要素から親要素へと伝播していきます。
イベントハンドラの設定方法:
- blur: 対象要素に直接イベントハンドラを設定します。
- focusout: 対象要素 または その親要素にイベントハンドラを設定します。

具体的な例

以下のHTMLコードを見てみましょう。

<div id="parent">
  <input type="text" id="input">
</div>

このコードにおいて、#input要素にフォーカスが失われたときに、以下のイベントハンドラが実行されます。

$('#input').blur(function() {
  console.log('フォーカスが失われました');
});

一方、以下のイベントハンドラは、#input要素 または その親要素である#parentdiv要素にフォーカスが失われたときに実行されます。

$('#parent').focusout(function() {
  console.log('フォーカスが失われました');
});

使い分け

blur: フォーカスが失われた要素自体で処理したい場合はblurイベントを使用します。
focusout: フォーカスが失われた要素 または その子要素で処理したい場合はfocusoutイベントを使用します。
親要素での処理:
- フォーカスが失われた要素が特定できない場合
- 親要素のDOM操作が必要な場合

jQueryでのイベントハンドラ設定

jQueryでは、on()メソッドを使用してイベントハンドラを設定できます。

$('#input').on('blur', function() {
  console.log('フォーカスが失われました');
});

$('#parent').on('focusout', function() {
  console.log('フォーカスが失われました');
});

「blur」と「focusout」は、要素にフォーカスが失われたときに発生するイベントですが、発生タイミング、バブリング、イベントハンドラの設定方法などが異なります。それぞれの違いを理解し、状況に応じて適切なイベントを使用することが重要です。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>blur vs focusout</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      // blurイベントの設定
      $('#input1').blur(function() {
        console.log('input1: blurイベント発生');
      });

      // focusoutイベントの設定
      $('#input2').focusout(function() {
        console.log('input2: focusoutイベント発生');
      });

      // focusoutイベントの設定 (親要素)
      $('#parent').focusout(function() {
        console.log('parent: focusoutイベント発生');
      });
    });
  </script>
</head>
<body>
  <h1>blur vs focusout</h1>

  <div id="parent">
    <input type="text" id="input1" placeholder="blur">
    <input type="text" id="input2" placeholder="focusout">
  </div>
</body>
</html>

説明

HTMLコードで、2つの入力フィールド (input1とinput2)と、それらを囲む親要素 (parent) を定義しています。
JavaScriptコードで、以下の処理を行っています。
- #input1要素にフォーカスが失われたときにblurイベントが発生し、コンソールにログを出力します。

実行方法

上記のHTMLコードを保存し、index.htmlなどの名前で保存します。
Webブラウザでindex.htmlを開きます。
input1とinput2に入力を行い、フォーカスを移動させます。

出力結果

input1に入力し、フォーカスを移動すると、コンソールに「input1: blurイベント発生」と出力されます。

このサンプルコードを通して、「blur」と「focusout」イベントの違いを理解することができます。

これらの違いを理解し、状況に応じて適切なイベントを使用してください。

他の方法

activeElementプロパティ

document.activeElementプロパティは、現在フォーカスを持っている要素を取得できます。このプロパティを定期的にチェックすることで、フォーカスが失われたタイミングを検知することができます。

setInterval(function() {
  const currentElement = document.activeElement;
  if (!currentElement) {
    console.log('フォーカスが失われました');
  }
}, 100);

このコードでは、100ミリ秒ごとにdocument.activeElementプロパティの値をチェックし、値がnullになった場合は、フォーカスが失われたと判断しています。

メリット:

blurやfocusoutイベントを使用するよりもコードがシンプルになる場合があります。

常にタイマー処理を実行するため、パフォーマンスに影響を与える可能性があります。

カスタムイベントを使用して、フォーカスが失われたことを通知するイベントを独自に定義することもできます。

const focusLostEvent = new Event('focuslost');

$('#input').on('blur', function() {
  $(this).dispatchEvent(focusLostEvent);
});

$(document).on('focuslost', function(event) {
  const lostElement = event.target;
  console.log(lostElement.id + 'のフォーカスが失われました');
});

このコードでは、focuslostという名前のカスタムイベントを定義し、#input要素にフォーカスが失われたときにそのイベントを発生させています。$(document)にイベントリスナーを設定することで、発生したイベントを処理し、フォーカスが失われた要素を特定することができます。

イベントバブリングを利用して、親要素で処理することもできます。

コードが複雑になる可能性があります。
カスタムイベントをサポートしていないブラウザでは動作しません。

フォーカスリングの表示/非表示

フォーカスリングは、現在フォーカスを持っている要素を視覚的に示すものです。フォーカスリングの表示/非表示を監視することで、フォーカスが失われたタイミングを検知することができます。

$('#input').focusin(function() {
  $(this).css('outline', '2px solid #000');
});

$('#input').focusout(function() {
  $(this).css('outline', 'none');
});