jQuery.fn.onに名前空間をつけることができる

恥ずかしながら今日まで知らなかったのですが、jQueryはイベントハンドラを登録するときに名前空間をつけることができます。（名前空間というよりはクラスという言い方の方がしっくりくるのですが、jQueryのドキュメントがnamespaceと表現しているので名前空間と書くことにします）

例えば、あるボタンのクリックイベントにイベントハンドラをつける時にこういう風に書きますが

$('.button').on('click', function (e) { /* イベントハンドラ */ });

こういう感じで . のあとに名前空間をつけても問題ありません。

$('.button').on('click.n1.n2', function (e) { /* イベントハンドラ */ });

ボタンがクリックされたらいずれのイベントハンドラも正しく起動されます。

何が嬉しいのか

通常であれば特に嬉しいことはありません。嬉しいのは jQuery.fn.off するときです。

$('.button').off('click');

イベントハンドラを解除するときはこのように書きますが、このボタンについているイベントハンドラが他にあったらそれらも全て消されてしまいます。document オブジェクトにイベントハンドラを登録している場合や、jQueryプラグインを作っていてどのような環境で使わるか作成者が分からないような場合は頭痛の種になりそうです。

名前空間を使うと綺麗に消すことができる

このような場合、イベントに名前空間をつけていると次のように指定することでその名前空間に属するものだけを消すことができます。

$('.button').off('click.n1'); // n1に属するclickイベントを消す
$('.button').off('.n1');  // n1に属する全てのイベントを消す

注意

$('.button').on('click.n1.n2', function () {});

は n1 の中に n2 がある、という 意味ではない です。これは n1 と n2 がついているクリックイベント、なのです。ちょうどHTML要素のclass属性に複数の要素がついているのと同じです。

<span class="n1 n2"></span>

このSPAN要素は $('.n1') でも $('.n2') でも $('span.n1') でも取り出せますよね？

それと同様にこちらも名前空間を指定することができる訳です。

$('.button').off('.n1');  // dblclick.n1とかも消える
$('.button').off('.n2');
$('.button').off('click.n1'); // dblclick.n1は消えない