前にもエントリー作ったけど、もうちょっと詳しく。
■関数定義（ver1.7?）
引数の渡し方によって解釈が異なる。
// bind構文
$(selector).on(eventName, function)
// delegate構文
$(scope).on(eventName, selector, function);
■引数解説
| 引数 |
詳細 |
| scope |
調査範囲（後から追加された要素に対して動的にメソッドをバインドさせる範囲） |
| selector |
動作を割り当てたいDOM要素を指定 |
| eventName |
次のようなイベント名を割り当てる。blur, change, click, dblclick, focus, focusin, focusout, hover, keydown, keypress, keyup, etc… |
| function |
関数を指定 |
■使用例
$(document).on('click', '.hoge', function(){...});
$('.fuga').on('keydown', '.piyo', function(){...});
調査範囲にdocumentを指定すると全てのDOM要素が.onの管理下におかれるため、非常にシンプルかつ強力な動的バインドが期待できる半面、イベントが発生するごとにドキュメント全体を走査するので処理的にはとても重たいという点に注意されたし。できるのであれば操作範囲は必要最小限に設定することが望ましい。
また、同時に複数のイベントに対して同じ動作を割り当てたい場合、下記のように第一引数を羅列してやればよい。
$('.hoge').on('click keydown blur', '.fuga', function(){...});
それぞれのイベントに対して、別々の動作を割り当てたい場合は第一引数にオブジェクトを渡してやり、第二引数にバインド対象となるDOM要素のセレクターを記述する。
$('.scope').on({
'click': function(){...},
'keydown': function(){...},
'blur': function(){...}
}, '.hoge');
下記のように引数を渡すことも可能。
// この場合各イベントで「myData」というアラートが表示される。
$(document).on({
'click': function(arg){alert(arg.data)},
'keydown': function(arg){alert(arg.data)},
'blur': function(arg){alert(arg.data)}
}, '.target', 'myData');
オブジェクトも渡せる。
$(document).on({
'click': function(arg){alert(arg.data.arg1)},
'keydown': function(arg){alert(arg.data.arg2)},
'blur': function(arg){alert(arg.data.arg3)}
}, '.target', {'arg1':'aaa', 'arg2':'bbb', 'arg3':'ccc'});
単一のイベントに対して引数を渡す際の書式は以下の通り。
$(document).on('click', '.target', {'arg1':'aaa'}, function(arg){alert(arg.data.arg1)});
.on()クッソ便利。