jQuery - focusイベント、focusinイベント、blurイベント、focusoutイベント

公開日：2018-12-28 更新日：2019-05-14
[jQuery]

1. 概要

要素にフォーカスが当たった時に focusイベント、focusinイベントが発生し、
要素からフォーカスがはずれた時に blurイベント、focusoutイベントが発生します。

focus と focusin、blur と focusout の違いは、
子要素が発生したイベントを、親で受け取るかどうかと言う違いがあります。

//要素にフォーカスが当たった時
$(セレクタ).on("focus", function(e) {
	処理;
});

//要素からフォーカスがはずれた時
$(セレクタ).on("blur", function(e) {
	処理;
});

//要素にフォーカスが当たった時（子にフォーカスが当たっても発生する）
$(セレクタ).on("focusin", function(e) {
	処理;
});

//要素からフォーカスがはずれた時（子からフォーカスがはずれても発生する）
$(セレクタ).on("focusout", function(e) {
	処理;
});

2.1 サンプル focus, blur

子のイベントは無視します。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body style="padding:0px; margin:0px;">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <div style="padding:20px; padding-top:20px;">
    <input type="text" id="parent1" value="parent1" /> <a href="" id="link" style="color:lightblue;">リンク</a>
    <br /><br />
    <div id="parent2" style="width:200px; height:55px; padding:10px; background-color:lightgray; color:black;">parent2
      <input type="text" id="child" value="child" />
    </div>
  </div>

  <div id="log" style="padding-left:20px;"></div>

  <script>

    //#parent1 と #parent2 と #link に、 イベントを設定します
    $("#parent1, #parent2, #link").on("focus", function(e) {
      log(e.target.id + ":focus");
    });

    $("#parent1, #parent2, #link").on("blur", function(e) {
      log(e.target.id + ":blur");
    });

    //ログ出力
    var no = 1;
    function log(msg) {
      $("#log").append ('<div>' + no++ + ":" + msg + '</div>');
      if ($("#log div").length > 10) $("#log div:first").remove();
    }

  </script>
</body></html>

「child」と書かれたテキストをクリックしても、親側ではイベントを受け取りません。
実行結果：画面


2.2 サンプル focusin, focusout

子のイベントを親で受け取ります。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body style="padding:0px; margin:0px;">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <div style="padding:20px; padding-top:20px;">
    <input type="text" id="parent1" value="parent1" />
    <br /><br />
    <div id="parent2" style="width:200px; height:55px; padding:10px; background-color:lightgray; color:black;">parent2
      <input type="text" id="child" value="child" />
    </div>
  </div>

  <div id="log" style="padding-left:20px;"></div>

  <script>

    //#parent1 と #parent2 に、 イベントを設定します
    $("#parent1, #parent2").on("focusin", function(e) {
      log(e.target.id + ":focusin");
    });

    $("#parent1, #parent2").on("focusout", function(e) {
      log(e.target.id + ":focusout");
    });

    //ログ出力
    var no = 1;
    function log(msg) {
      $("#log").append ('<div>' + no++ + ":" + msg + '</div>');
      if ($("#log div").length > 10) $("#log div:first").remove();
    }

  </script>
</body></html>

「child」と書かれたテキストをクリックしても、親側でイベントを受け取ります。
実行結果：画面



Tag

New Article