.on で namespace つきの eventType を登録する

JQuery を HTMLElement セレクターとしてしか使えてなかったので、勉強になるだろうと bootstrap.js を読んでいる（そのまえにドキュメント全部読めばって話ではある）。知らなかった使い方があればメモ。

.on で namespace つきの eventType を登録する

同じ eventType に登録された複数のイベントリスナーのうち特定のものをはがしたい場合、unbind(eventType) でははがしたくないものもはがされるので、関数へのリファレンスを保持しておく必要がある。

var handler1
, handler2
, $test1 = $('#TEST1')
, $test2 = $('#TEST2');

$test1.on('click', function (e) {
   console.log('always 1');
});
$test2.on('click', function (e) {
   console.log('always 2');
});

$test1.on('click', handler1 = function (e) {
   console.log('test 1');
   $test2.unbind('click', handler2);
});
$test2.on('click', handler2 = function (e) {
   console.log('test 2');
   $test1.unbind('click', handler1);
});

handler1 とか handler2 がそれで、関数自身で自分をはがす場合は arguments.callee を使えなくもないが（悪手らしい）、ほかのイベントリスナーをはがそうとすると手がかりがない。

そこで namespace を使う。

var $test1 = $('#TEST1')
, $test2 = $('#TEST2');

$test1.on('click.test.always', function (e) {
   console.log('always 1');
});
$test2.on('click.test.always', function (e) {
   console.log('always 2');
});

$test1.on('click.test.test', handler1 = function (e) {
   console.log('test 1');
   $test2.unbind('click.test.test');
});
$test2.on('click.test.test', handler2 = function (e) {
   console.log('test 2');
   $test1.unbind('click.test.test');
});

e.type でひくと click が返る一方で unbind などでは区別されているので、unbind('click.test.test') とした場合 click.test.always ははがされずに残る。unbind('click.test') だとどちらも消える。

はがす予定のイベントリスナーにはわざわざメンバー変数などを用意していたのですが、これならその手間がはぶけてとても便利ですね。