jQuery - focusイベント、focusinイベント、blurイベント、focusoutイベント
公開日：2018-12-28
更新日：2019-05-14
更新日：2019-05-14
1. 概要
要素にフォーカスが当たった時に focusイベント、focusinイベントが発生し、
要素からフォーカスがはずれた時に blurイベント、focusoutイベントが発生します。
focus と focusin、blur と focusout の違いは、
子要素が発生したイベントを、親で受け取るかどうかと言う違いがあります。
要素からフォーカスがはずれた時に 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
子のイベントは無視します。
「child」と書かれたテキストをクリックしても、親側ではイベントを受け取りません。
<!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
子のイベントを親で受け取ります。
「child」と書かれたテキストをクリックしても、親側でイベントを受け取ります。
<!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」と書かれたテキストをクリックしても、親側でイベントを受け取ります。
実行結果：画面
