jQuery#onを便利に使う

今まで

$(selector).on('click', function(event) { });

くらいしか使ってこなかったのだけど、調べてみたらもっと便利に使える事を知ったのでメモ。多分on()だけじゃなくone()も同じかな。

イベントにネームスペースを付けられる

$(selector).on('click.add-button', function(event) {
});

$(selector).on('click.remove-button', function(event) {
});

// click.remove-buttonだけ削除される
$(selector).off('click.remove-button');

データをバインドできる

$(selector).on('click', {message: 'Hello!'}, function(event) {
  // event.dataからmessageにアクセスできる
  alert(event.data.message);
});

後から追加した要素に対してハンドラをアタッチできる

// ボタンのハンドラをdocumentにセットする
$(document).on('click', 'button', function(event) {
  alert('Hello, World!');
});

// 後から要素を追加する際、第二引数のセレクタに一致する場合ハンドラがアタッチされる
$('body').append('<button>button</button>');

---

上記すべて

$(document).on('click.button', 'button', {message: 'Hello!'}, function(event) {
  alert(event.data.message);
});

便利かもー。

---

ネームスペース、ねえ

にも確かにnamespaceうんぬんとか書いてあるんだけど。

$('body').on('click.aaa.bbb', {eventName: 'click.aaa.bbb'}, function(event) {
  console.log(event.data.eventName);
});
$('body').on('click.aaa.ccc', {eventName: 'click.aaa.ccc'}, function(event) {
  console.log(event.data.eventName);
});
$('body').on('click.bbb.aaa', {eventName: 'click.bbb.aaa'}, function(event) {
  console.log(event.data.eventName);
});
$('body').on('click.bbb.ccc', {eventName: 'click.bbb.ccc'}, function(event) {
  console.log(event.data.eventName);
});

// 'click.aaa.ccc'以外のイベントが削除される
$('body').off('click.bbb');

ネームスペースとは動作のイメージが違うような気がするよ……　クラスっぽいイメージ。