jQueryのメソッド（備忘録）

.on()メソッド

イベントの定義

たとえば、.click()はこの.on()メソッドを呼び出している。

$('element').click(function() {
    // 処理内容
});

.on()を使うと

$('element').on('click', function() {
    // 処理内容
});

と書ける。

機能

一度に複数のイベントタイプを定義できる。（半角スペース区切り)

$('element').on('event1 event2', function() {
    // 処理内容
});

複数のイベントとイベントハンドラを一括定義できる。

$('element').on({
    'event1': function() {
        // 処理内容
    }
    'event2': function() {
       // 処理内容
   }
});

データを渡せる

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

dataにキーと値の組み合わせのデータを渡しておくとそのイベントが発生した時にイベントオブジェクトを通してevent.dataにその値が格納され、イベントハンドラから扱えるようになる。
→共通のイベントハンドラを使って異なる処理ができる。

.bind()と.delegate()

jQuery1.7で.on()が実装されるよりも前は、別のイベント定義用のメソッドが使われていた。
現在は.on()を使うことが推奨されているが、要素に直接イベントを定義するには.bind()、祖先要素にイベントを定義するには.delegate()を使うことで.on()と同じ機能を実装できる。
.on()では引数の渡し方でバインドとデリゲートを分けているので、パッと見分かりにくい。
→.bind()と.delegate()を使い続けることもある。

$('element').on('event', function() { // 処理内容 });
$('element').bind('event', function() { // 処理内容 });

$('element').on('event', 'element', function() { // 処理内容 });
$('element').delegat('element', 'event', function() { // 処理内容 });