jQuery 1.7 の .on() メソッドを使ってみた。

前置き

このエントリ執筆時点で jQuery の最新版 *1 である 1.7から、イベント取り扱いのためのメソッドとして .on() / .off() なるメソッドが追加された。

jQuery 大好きっ子な id:monry84 としては、「これは試さねば！」と思えたので、試してみた。その備忘録。

そもそも何？

.on() / .off() ってそもそも何よ？というと、以下の通り。

; .on()

Description: Attach an event handler function for one or more events to the selected elements.

; .off()

Description: Remove an event handler.

今まで、.bind(), .live(), .delegate() の使い分けがややこしかったのが、ひとまとめになった印象を受ける。

.off() は .unbind() と同じ感じなのかな？

実際に使ってみた。

.bind() っぽい使い方。

<p>
  <a id="hoge" href="#">Click me!</a>
</p>

// 要素を直接指定してイベント割り当て。
$('#hoge').on(
  'click'
  , function(event) {
    event.preventDefault();
    alert('Clicked!!');
  }
);

.live() っぽい使い方

<p id="hoge">
</p>

// document.ready() 時にP要素直下にA要素を追加する。
$(
  function() {
    $('p').append($('<a>').attr({href: '#'}));
  }
);
// スクリプト読み込み時には存在していない要素に対してイベント割り当て。
$('#hoge').on(
  'click'
  , 'a'
  , function(event) {
    event.preventDefault();
    alert('Clicked!!');
  }
);

.delegate() っぽい使い方

<p>
  <a id="hoge" href="#">Click me!</a>
</p>

// body 要素のクリックとしてイベント割り当てを行い、第二引数のセレクタにマッチする場合にイベント発火。
$('body').on(
  'click'
  , '#hoge'
  , function(event) {
    event.preventDefault();
    alert('Clicked!!');
  }
);

つまり？

一言で言うなら、.bind(), .live(), .delegate() が一つのメソッドで出来るようになりましたよ、と。

負荷を考慮せずに書くなら、全て以下のように書けば、楽になるかな？

$('body').on(
  '<event_name>'
  , '<selector>'
  , function(event) {
    // 何か処理
  }