備忘録的プログラミングリファレンス

focusout ( onfocusout )イベント

 focusout ( onfocusout )イベントは、エレメントからフォーカスが外れると発生する FocusEvent インターフェイスのイベントです。 例えば、inputエレメントなどのformエレメントで、入力から別の場所にフォーカスが移動すると発生します。

focusout ( onfocusout )イベント
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)

BubblesYes
CancelableNo
InterfaceFocusEvent
Supported HTML ElementsALL HTML elements

Example

 inputエレメントがフォーカスされると背景色が明るくなります。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

- ad -