)ver1.4.3〜機能jQueryオブジェクトで指定した要素からフォーカスが外れたら引数のfunctionを実行します。ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます(データはイベントオブジェクトのdataプロパティ経由で渡されます)。blurメソッドと異なり子孫要素からフォーカスが外れた時にもfunctionが実行されます(ページ下部のメモを参照)。解説フォーカスが外れた時に実行する処理を設定サンプル(focusout/01.html)を開いてbody内にtextタイプのinput要素が1つあることを確認してください。jQueryは以下の様に記述されfocusoutメソッドの引数にfunctionの「outFunc」が設定されています。{$("input").focusout(outFunc);});focusoutメソッドの引数に設定するFunctionは以下の様な構文になっています。引数(イベントオブジェクト)を受け取ります。フォーカスが外れたら実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。cssメソッドを利用して背景色を薄黄色に変更しています。このサンプルでは引数(イベントオブジェクト)は利用していません。{$("input").css("background-color","#ffc");};結果として、一度input要素をフォーカスしてからフォーカスを外すと背景色が薄黄色になります。イベントのfunction設定は、無名関数を利用することが多いです。{$("input").css("background-color","#ffc");});サンプルfocusout/01.htmlやサンプルfocusout/01b.htmlはフォーカスが外れたときの処理しか書いていませんが、参考としてフォーカスされたときに背景色を薄黄色にして、フォーカスが外れたときに背景色を白に戻すサンプルをページ下部の「メモ」で紹介しています。objectオブジェクトをfunctionに渡す第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。dataプロパティを介して渡されます。サンプル(focusout/02.html)を開いてbody内の構成はfocusout/01b.htmlと同じ事を確認してください。jQueryは以下の様に記述され、focusoutメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。valメソッドを利用してinput要素に表示します。{$("input").val(eo.data.test);});結果として、一度input要素をフォーカスしてからフォーカスを外すと、input要素の値として第1引数で渡されたtestプロパティの値「10」が表示されます。focusinメソッドを利用します。blurメソッドがあります。このメソッドとの違いは以下の「メモ」で紹介しているので参考にしてください。メモblurメソッドとの違いblurメソッドはfocusoutメソッドと同じようにフォーカスが外れたときの処理を設定します。異なる点は子孫要素に反応するか否かです。blurイベントはバブリングしない(親要素にイベントが伝わらない)ため子孫要素でイベントが発生してもfunctionは実行されません。これに対しfocusoutイベントはバブリングするため、子孫要素からのイベントを受け取りfunctionを実行することができます。これはmouseoverイベントとmouseenterイベントの関係に似ています。→参考:使い方「イベントフロー(3)」blurメソッドのサンプル(子孫要素に反応しない):(blur/test02.html)focusoutメソッドのサンプル(子孫要素にも反応する):(focusout/test02.html)上記2つのサンプルともbody内の構成は以下の様に、form要素内にinput要素があります(つまりinput要素はform要素の子孫要素)。/></form>続いてjQueryを確認します。ほとんどfocusout/01.htmlと同じなのですが利用しているメソッドが異なります(blurとfocusout)。ポイントなのは、2つのファイルともセレクタがform要素になっている点です。{$("form").blur(inFunc);});まずはblurメソッドのサンプル(blur/test02.html)で一度input要素をフォーカスしてからフォーカスを外してください。背景色は薄黄色になりません。セレクタがform要素なのですから機能しないのは当たり前のように感じます。focusoutメソッドのサンプル(focusout/test02.html)では、input要素からフォーカスが外れると背景色が薄黄色に変わります。これは(form要素の子孫要素である)input要素で発生したイベントを受け取るためです(イベントはバブリングで上がってくる)。focusinメソッドの処理を追加してフォーカスしたらinput要素の背景色を薄き色にして、フォーカスが外れたら背景色を白に戻すようにしました。