focusoutとは
- ここで説明する focusout とは次の語句からなるjQueryのメソッドです。
- focus
- 読み: フォーカス
意味: 焦点 - out
- 読み: アウト
意味: 外、不在
focusoutメソッドの概要
このメソッドは、セレクタに該当する既存要素にフォーカスアウトイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているフォーカスアウトイベントを呼び出します。
フォーカスアウトイベントは、入力要素が入力可能な状態から入力不可の状態になると発生します。
このイベントは、バブリングを起こします。
イベントのバブリングとは子要素にバインドしているイベントの発生が親要素に伝播して、親要素にバインドしている同種イベントも同時(子要素から順次)に発生する現象のことを言います。 バブリングは「良い」、「悪い」で判断するのではなく、そのような機能であり、状況によってメソッドを選択することが必要です。
構文
サンプルを見る前に構文を確認しておきます。
Selector.focusout(Handler(EventObject));
Selector.focusout([EventData], Handler(EventObject));
Selector.focusout();
- 01: フォーカスアウトイベントが発生した時点でハンドラーが実行されます。
- 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
- 03: セレクタにバインドしているフォーカスアウトイベントを呼び出します。
サンプルコードと実行結果
ここでは、input と、その親要素の div に focusout() でイベントをバインドします。
フォーカスアウトは、バブリングするので 親や先祖要素に同種のイベントがバインドされていれば 子要素側から先祖要素側に向けて順にイベントが発生していきます。 これを利用して子要素のフォーカスアウトを発生元にして親要素のフォーカスアウトが発生した時点で、親要素のスタイルを変更してみたいと思います。
サンプルコード: CSS
<style>
div{
margin: 0.4em;
padding: 0.4em;
border-radius: 5px;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div><input type="text" placeholder="focusin"></div>
<div><input type="text" placeholder="focusin"></div>
<script>...</script>
</body>
- 06, 07: div input (div の子要素に input を配置しています。この要素らにイベントをバインドします。)
サンプルコード: script
<script>
$("input").focusin(function(){
strColor = "##lightpink";
});
$("div").focusin(function(){
$(this).css("background-color", strColor);
});
$("input").focusout(function(){
strColor = "transparent";
});
$("div").focusout(function(){
$(this).css("background-color", strColor);
});
</script>
- 02-04: $("input").focusin(function(){}) (input要素にフォーカスインイベントをバインドします。関数では strColor 変数に「ライトピンク」の文字列を設定しています。)
- 05-07: $("div").focusin(function(){}) (div要素にフォーカスインイベントをバインドします。関数では 自身の背景色を strColor 変数の色に設定します。)
- 08-10: $("input").focusout(function(){}) (input要素にフォーカスアウトイベントをバインドします。関数では strColor 変数に「トランスペアレント」の文字列を設定しています。)
- 11-13: $("div").focusout(function(){}) (div要素にフォーカスアウトイベントをバインドします。関数では 自身の背景色を strColor 変数の色に設定します。)