Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

恥ずかしながら今日まで知らなかったのですが、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 がある、という 意味ではない です。これは n1n2 がついているクリックイベント、なのです。ちょうど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は消えない
yuku_t
FLYWHEEL社でソフトウェアエンジニアをしています。昔はIncrements社最初の従業員としてQiitaを開発したりCTOやったりしていました。
http://yuku.takahashi.coffee
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away