focusout ( onfocusout )イベント
focusout ( onfocusout )イベントは、エレメントからフォーカスが外れると発生する FocusEvent インターフェイスのイベントです。 例えば、inputエレメントなどのformエレメントで、入力から別の場所にフォーカスが移動すると発生します。
document.getElementsByTagName("form")[0].addEventListener("focusout", (event)=>{ console.log( event.target ); });
詳しくは Example を参照してください
focusoutイベントはBubbles機能が働きますので、エレメントからフォーカスが外れたことをコードで捉えることができます。focusイベントはBubbles機能がないので、エレメントのフォーカスが外れたか/否かはfocusoutイベントを使います。
onfocusoutイベントの対としてonfocusinイベントがあります。
FireFoxはfocusoutイベントをver.52からサポートしています。古いバージョンでは動きません。常に新しいバージョンを利用することを促す必要があるでしょう。
ページ内 Index
- ad -
構文(Syntax)
エレメントにイベントハンドラーを定義する方法には以下があります。
in HTML
<tagelement onfocusout="function(); ...;">
in JavaScript
object.onfocusout = function(){... };
addEventListener()
関数の呼び出しは関数名のみ使用で、event 以外の引数が渡せない。
object.addEventListener("focusout", function_name);
スクリプトを直接記述する方法。スクリプトから関数を呼び出せる。
object.addEventListener("focusout", ()=>{ ... },false); // または object.addEventListener("focusout",function(){ ... },false);
イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。
備考(Remarks)
Bubbles | Yes |
Cancelable | No |
Interface | FocusEvent |
Supported HTML Elements | ALL HTML elements |
Example
inputエレメントがフォーカスされると背景色が明るくなります。
- ad -