[jQuery]イベントハンドラ登録時に名前空間を利用する

同僚が知らなかったっぽいので覚書。
意外とマイナーな機能なのか、これ。

jQueryでイベントハンドラを登録するとき、

$hoge.on('click', function(e) {
    console.log('hoge clicked');
});

こんな風に設定することが多いと思うけど、これを、

$$hoge.on('click.hoge', function(e) {
    console.log('hoge clicked');
});

こーゆー形式にしておくと、色々捗るよね、って話。

クリックイベントに対して、個別に名前みたいなものを付けることができて、同じクリックイベントでもイベントハンドラを名前で管理できるようになる。

名前空間を作るには、「イベント名.名前」のように、ドット区切りで指定する。

イベントを発火する時は、

$hoge.trigger('click.hoge');
$hoge.trigger('click');

どちらの形式でも可能。

当然だけど、前者の名前空間ありの形式でイベントを発火した場合は、その名前空間にバインドされたイベントハンドラしか実行されない。

で、これを使うと何が捗るのかというと、個別にイベントを管理できるようになることで、イベントの発火とイベントハンドラの削除を細かく制御することができるようになる。

イベントの発火に関してはさっきの例と同じ。

$hoge.trigger('click.hoge');

これはクリックイベントの中でもhogeという名前空間にバインドされているハンドラしか実行されない。

つまり、通常のクリックイベントにバインドされているハンドラは実行されない。

個人で自由にコーディングしたり、自分のプログラムしか実行させない環境ではあまり恩恵がないかもしれないけど、複数のプログラムが実行される可能性がある場合はこれがないと辛い。
誰が同じ要素にイベントハンドラを設定しているかわからないから。

お互いが干渉しないような処理で、全部実行しても構わない場合は問題ないけど、そうとも限らない。
なので、自分が管理しているイベントハンドラだけ実行させたいときにこの名前空間を利用するとは捗る。

削除の場合も理由はほぼ同じ。

自分の管理しているイベントハンドラだけ削除したい場合に名前空間を利用すれば簡単に削除できるようになる。

複雑なDOM操作をしない場合、イベントハンドラを削除することはあまりないのかもしれないけど、不要なものは消したほうが気持ちいいよね、って話。

まぁ書いたけど、実際名前空間使ってるかというと、あまり使ってなかったな。
これから気を付けよう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です