jQuery1.7で追加されたon/off。

気づけばjQueryも1.7が出てましたw。
おいおい追加された機能を調べて行くけどon/offは分かりやすかったので取り敢えずまとめておく。

簡単に言うと、今までのイベントのバインドメソッドが一つにまとまりましたよ〜。という感じ。

jQueryでこれまで使えたイベントのバインドメソッド

  • $(ele).bind(fn)

    各要素それぞれにイベントをバインド

  • $(ele).live(fn)

    $(document)にイベントをバインド。bubblingで上がってきたイベントの発生元とセレクタの一致をチェックして、一致してたら発火。

  • $(ele).delegate(selector,fn)

    liveの強化版。$(document)ではなく任意の要素にイベントをバインドして、bubblingをチェック出来るようになったやつ。

それぞれ使い分けするにしても、イベントのバインドだけで3つ(unbindするメソッド入れると6つ)もあってコードが読みづらかったのを、on/offですっきり!という感じでしょうか。

これまでのイベントのバインドをon/offで書き直す

  • bind
    $( 'button' ).bind( 'click',fn);
    ↓
    $( 'button' ).on( 'click', fn);
  • live
    $( 'button' ).live( 'click',fn);
    ↓
    $(document).on( 'click','button', fn)
  • delegate
    $( '.sample' ).deligate( 'click','button',fn);
    $( 'sample' ).on( 'click','button', fn)

どの要素にイベントをバインドしてるか、直感的に分かりやすくなってていいですね。
今後は全部on/offで書いた方が可読性も増しそうです。

jQuery1.7で追加されたon/off。