フォーカスアウト【focusout】

概要

フォーカスアウトとは、コンピュータの操作画面で、入力要素などの選択状態が外れること。また、そのタイミングやイベント。他の要素が代わりに選択されるか、何も選択されていない状態になる。 “blur” （ブラー）とも言う。

入力フォームなど複数の入力要素からなる操作画面では、キーボードなどからの入力をどの要素に与えるか確定しなければならないため、事前の操作によって一つの要素を選択済みの状態にする。これを「フォーカス」（focus）という。

例えば、テキスト入力欄をクリックまたはタップすると、その欄がフォーカスを得た状態となり、文字入力を受け付けるようになる。要素が入力対象として選択されることを「フォーカスイン」（focusin）という。一方、フォーカスアウトは、選択されていた要素からフォーカスが外れ、入力対象ではなくなることを指す。利用者が画面上で他の要素を選択した場合などに起きる。

JavaScriptのフォーカスアウトイベント

Webページ上で動作するJavaScript プログラムでは、フォーカスアウトは主にblurイベントとして実装される。プログラム上でこのイベントの発火時に実行する処理を指定しておくことで、利用者が入力を終えて次の項目に移ったタイミングに合わせて処理を実行できる。入力値が指定した書式通り入力されているか検証（バリデーション）する処理などで用いられる。

blurイベントと類似する別のイベントにfocusoutイベントがある。両者はほぼ同じタイミングで発火するが、技術的な違いが一つある。blurは親要素へのイベントの伝播（バブリング）が発生せず、その要素で完結するのに対し、focusoutは捕捉されるまで上位要素へ順次バブリングしていく。複数の子要素をまとめて監視したり、共通の処理を実施したい場合などにはfocusoutイベントが便利である。