【jQuery】onメソッドの使用方法

ドキュメント

jQuery APIドキュメント（公式）
jQuery APIドキュメント（日本語）

基本の使用方法

.on( events [, selector ] [, data ], handler )

jQueryオブジェクトにイベント処理を紐付けることができる。

引数	データ型	説明
events	String	複数のイベントを設定できる。
selector	String	選択jQueryオブジェクトの子孫要素を設定することでイベントデリゲートできる。
data	Anything	イベントハンドラに渡したいデータをハッシュで指定できる。
handler	Function	eventsが起きたタイミングで実行されるイベントハンドラ。

eventsで複数のイベントを設定

半角スペース区切りで複数のイベントを設定

$('.foo').on('click blur', function(){...});

設定できる主なイベントは下記。
http://pentan.info/javascript/event_handler.html
http://phpjavascriptroom.com/?t=js&p=event

また、.trigger()で設定したカスタムイベントを使用することも可能。

連想配列にしてイベントごとに異なる処理を設定

$('.foo').on({
  'mouseenter': function(){...},
  'mouseleave': function(){...}
});

selectorでイベントデリゲート

$("ul").on("click","li",function(){
	alert($(this).text());
});

イベントデリゲートとは子要素に対して起こしたイベントが親要素に次々と伝播していくイベントバブリングというjavascriptの特徴を利用したイベントの書き方である。
これを利用すれば、子要素に対して起こしたいイベントを親要素に対して設定できる。
メリットはスクリプトで後から追加するものに対してもイベントを書けること、メモリの節約の2つである。

$("li").on("click",function(){
	alert($(this).text());
});

先ほどのスクリプトはこう書くのと同じだが、こちらはli全てに対し処理を設定するのに対して、先ほどのスクリプトはulひとつにのみ処理を設定している。

$('.parent').on({
  'mouseenter': function(){...},
  'mouseleave': function(){...}
}, '.foo');

もちろん、eventsとselectorの合わせ技も可能。

dataを処理したいイベントハンドラに渡す

for (var i = 0; i < 3; i++) {
  $('button').eq(i).on('click', { value: i + 1 }, onClick);
}
 
function onClick(e) {
  alert(e.data.value + '番目のボタンをクリックしました');
}

イベントが実行されたときにイベントオブジェクトを通して、event.dataにその値が格納され、イベントハンドラから扱えるようになる。

offによる解除

$('button').on('click', function() {
  alert('クリックされました');
});
 
$('button').off('click');

bind、live、delegateについて

bindはonと似ているがスクリプトで後から追加したものには対応できない。
liveとdelegateはスクリプトで後から追加したものに対応できる。
liveとdelegateでは書き方が若干異なる。
全てonで賄えるため、基本的には使用しない。

参考URL

jQuery 便利なonを使おう（on click)
jQuery の on() と off() を理解する
実践、jQuery 第1回 .on()と.off()を使いこなす 1