jQueryでイベントデリゲート記述のメモ

イベントを複数もつ要素に対して、イベントデリゲートを記述するときに書き方忘れがちなのでメモ。

html

<ul>
<li>TEST1<li>
<li>TEST2<li>
<li>TEST3<li>
</ul>

イベント単体バージョン

javascript

$('ul').on('click', 'li', function() {
  // click時のイベントを記述
  console.log($(this).text());  // li実体
});

イベント複数バージョン

javascript

$('ul').on({
  'mouseenter': function() {
    // mouseenter時のイベントを記述
  },
  'mouseleave': function() {
    // mouseleave時のイベントを記述
  }
}, 'li');

jQuery1.7以上であれば上記記述で良いけど、それ以下のバージョンでは直接イベント定義の時には、bind()で、デリゲートしたければdelegate()で定義。
ちょっと記述方法が違う。

delegate()での実装（一応）

javascript

$('ul').delegate('li', 'click', function(){
  // click時のイベントを記述
});