)ver1.4.3〜調査範囲はjQueryオブジェクトにしないといけません。bindメソッドと比較して、動的に追加された要素にもイベントを設定でき非常に便利です。イベントが発生するたびにDOMの状態を確認するため、負荷の高い処理になってしまいました。そこで登場したのがdelegateメソッドです。delegateメソッドでは調査範囲を限定することで負荷を下げています。liveメソッドは負荷が高いためv1.9で廃止されました。delegateメソッドは調査範囲(jQueryオブジェクトで指定)内にあるセレクタで指定した要素にイベントが発生した時に実行するfunctionを設定します。設定できるイベントは左メニューのマウスイベント(click)〜ロードイベント(ready)※ただしhover,toggleは除くです。ver1.4.3からはobjectオブジェクトを利用して、一度に複数のイベントを設定できます。onメソッドを利用するようにしてください。解説イベント発生時に実行する処理を設定サンプル(delegate/01.html)を開いてbody内にboxのclass属性が設定されたdiv要素が2つあることを確認してください。これらのdiv要素は、それぞれmainとsubの異なるid属性が設定されたdiv要素内にあります。class="box"></div></div>jQueryは以下の様に記述され、delegateメソッドの引数にはセレクタとしてboxのclass属性の要素、イベント名として「click」、そしてfunctionに「clickFunc」が設定されています。特徴的なのは、最初のjQueryオブジェクトが調査範囲となっていることです(サンプルではid属性mainが設定されています)。これでid属性mainに含まれる要素しか調べなくなり、その分、高速に処理できるというわけです。clickFunc);});delegateメソッドの引数に設定するfunctionは以下の様な構文になっています。引数(イベントオブジェクト)を受け取ります。イベント名で指定したイベントが発生したら実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあります。任意の名前(イベントオブジェクト){イベント名で指定したイベントが発生したら実行したい処理}サンプルdelegate/01.htmlで利用したclickFuncは以下の様になっており、アラートで「click」と表示します。clickFunc(eo){alert("click");};結果として、上のdiv要素をクリックするとアラートで「click」と表示されます。下のdiv要素はid属性mainの要素には含まれないため、調査はされずイベントに反応しません。functionの設定は無名関数を利用することが多いです。(eo){alert("click");});複数のイベントに共通のfunctionを設定delegateメソッドのイベント名は半角スペースを挟むことで複数のイベントに共通のfunctionを設定できます。サンプル(delegate/02.html)を開いてbody内の構成はdelegate/01.htmlと同じ事を確認してください。jQueryもほとんどdelegate/01.htmlと同じで、異なるのは以下の様にイベント名に半角スペースを挟んで「mouseenter」が追加されていることです。clickFunc);});結果として、上のdiv要素にマウスカーソルが入った時(mouseenter)もアラートで「click」と表示されます。この構文では各イベントとも共通のfunctionしか設定できません。複数のイベントに異なるfunctionを設定したい場合は2項先の「まとめて複数のイベントを設定する」の構文を利用します。objectオブジェクトをfunctionに渡すイベント名とfunctionの間(つまり第3引数)にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。dataプロパティを介して渡されます。サンプル(delegate/03.html)を開いてbody内の構成はdelegate/01b.htmlと同じ事を確認してください。jQueryは以下の様に記述され、delegateメソッドの第3引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。このサンプルでは、この値をアラートで表示します。(eo){alert(eo.data.test);});結果として、上のdiv要素をクリックすると第3引数で渡されたtestプロパティの値「10」がアラートで表示されます。まとめて複数のイベントを設定するv1.4.3からdelegateメソッドは、第2引数にobjectオブジェクトを設定することで複数のイベントにそれぞれ個別のfunctionを設定できます。サンプル(delegate/04.html)を開いてbody内の構成はdelegate/01.htmlと同じ事を確認してください。jQueryは以下のように「eventObj」というobjectオブジェクトを作成し、そのプロパティとしてイベント名を設定します。サンプルではmouseenterとmouseleaveのイベントを設定し、実行したいfunctionを代入しています。mouseenterで背景色をオレンジに、mouseleaveで背景色を青にしています。function(eo){$(this).css("background-color","#09c");};作成したobjectオブジェクトは以下の様にdelegateの第2引数として設定します。結果として、上のdiv要素にマウスカーソルを重ねるとdiv要素の背景色がオレンジ色になり、マウスカーソルを外すと青に戻ります。eventObj);});構造が分かりにくくなりますが、objectオブジェクトをdelegateメソッドの第2引数に直接設定することも可能です。→サンプル(delegate/04b.html)falseを返すfunctionの利用functionを設定する部分にfalseを設定すると、イベントフローを停止しブラウザ本来の機能も停止することができます。false」を実行すると、イベントフローを停止しブラウザ本来の機能も停止するのです。サンプル(delegate/05.html)を開いてbody内にa要素が1つあるのを確認してください。textメソッドを利用してa要素の文字部分を「クリックされたよ」と変更します。この処理があるので、a要素をクリックしてもブラウザ本来のリンク処理は実行されません。このサンプルでは確認できませんがイベントフローも停止します。これについては使い方を確認してください。undelegateメソッドを利用します。liveメソッド、delegateメソッドと進化してきました。onにまとめられました。delegateメソッドは非推奨にはなっていませんが、delegateメソッドとonメソッドは引数の順番が異なり混乱を招きます。delegateメソッドは覚えずにonメソッドを覚えるようにしましょう。