onメソッド
メソッド on は要素にイベントハンドラを
追加することができます。ハンドラを削除するには
メソッド off を、
イベントが一度だけ発生し、その後ハンドラが自身を
削除するようにするにはメソッド
one を
利用してください。
on が呼び出される時点で、ハンドラを
バインドする要素が存在している必要があります。
構文
このようにして要素にイベントハンドラを追加します。
第一引数として、スペースで区切られた1つ以上の
イベントを文字列で渡します。第二引数として、
要素内の子孫をフィルタリングする追加のセレクタを
渡します。第三引数として、イベント発生時に
ハンドラ内の event.data
プロパティに渡される追加データを渡します。
第二引数と第三引数はオプションです。
第四引数として、イベントオブジェクトとオプションの
追加パラメータを受け取るハンドラ関数を渡します。
ハンドラ関数の代わりに false を渡した場合、
関数は単純に false を返します:
$(セレクタ).on(イベント, [セレクタ], [データ], ハンドラ関数(イベントオブジェクト, [追加パラメータ]));
別の方法で on メソッドを利用することもできます。
この場合、第一引数にはJavaScriptオブジェクトを渡し、
そのキーはイベントタイプ、値はそのイベントに対して
呼び出されるハンドラ関数とします:
$(セレクタ).on({'イベントタイプ': handler}, [セレクタ], [データ]);
追加のセレクタを渡さない場合、イベントはハンドラを アタッチした要素自体で発生します。 渡した場合は、そのセレクタに一致する子孫要素で 発生します（イベント委譲）。 同じイベントハンドラは、複数回要素にバインドすることができます。
例
#test を持つ段落がクリックされた時に、
そのテキストを alert で
表示してみましょう。他の段落のクリックは何も起こしません:
<p>text1</p>
<p id="test">text2</p>
<p>text3</p>
$('#test').on('click', function() {
alert( $(this).text() );
});
例
段落をクリックした時に、on メソッドに渡した
データを表示してみましょう。
作成した testFunc というハンドラ関数を
利用します:
<p>click</p>
function testFunc(event) {
alert(event.data.text);
}
$('p').on('click', {text: 'aaa'}, testFunc);
