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