jQuery入門講座使い方-名前空間

名前空間

無名関数だとoffできない？

前回はonで設定した処理が、あらかじめfunctionとして作成されていたため（widthFuncやheightFunc）、offで処理名を指定してイベントを外すことができました。しかしサンプル（02/10_01.html）のように無名関数でイベントが設定されていたら、名前がないためにoffで処理名を指定できません。

$(document).on("click", "div#test", function(){
	var myWidth = $(this).width()
	myWidth += 10;
	$(this).width(myWidth);
});

私は付けたり外したりする処理は管理しやすいようにfunctionをあらかじめ作成し命名しておくことを好むのですが、無名関数の場合でも名前空間という仕組みを利用すればoffで処理を指定して削除することが可能になます。また最後に紹介しますが、異なるイベントに対してもグループ化することが可能となり、より高度なイベント管理が実現できます。

イベントのラベリング

名前空間の役割は対象にラベルを付けてグループ化し、効率よく管理するための仕組みです。まずは名前空間の設定方法を説明します。サンプル（02/10_02.html）のソースを確認して下さい。着目するのは以下のソース1行目と7行目です。

onで設定しているイベント名の後ろに.（ドット）につづけてwidthやheightと書かれています。この.（ドット）に続くものが名前空間です。イメージとしては同じclickという処理に、widthやheightと異なるラベルを貼ることだと考えて下さい。

$(document).on("click.width", "div#test", function(){
	var myWidth = $(this).width()
	myWidth += 10;
	$(this).width(myWidth);
});
				
$(document).on("click.height", "div#test", function(){
	var myHeight = $(this).height()
	myHeight += 10;
	$(this).height(myHeight);
});

続いてoffの部分を確認して下さい。引数は１つしか無く、ここに外したいイベントの名前空間を書きます。名前空間の指定はサンプルのように（ダブル）クォートで囲む必要があることに注意して下さい（function名の時は必要ありませんでした）。

このサンプルでは以下の様に.height（ドットを忘れずに）と指定しているので２つめのonで設定した処理が外されます。実際にボタンをクリックすると高さの処理が外れて高さが伸びなくなることを確認して下さい。

$("button").click(function(){
	$(document).off(".height");
});

イベントのグループ化

名前空間は他の用途にも利用できます。前回のサンプル（02/09_04.html）で紹介したように、異なるイベントをまとめて外すことはできませんでした。しかし異なるイベントに同じ名前空間を設定すれば、まとめて処理を外すことが可能になります。

サンプル（02/10_03.html）を開きjQueryの以下の部分を確認して下さい。ポイントはイベントを設定する際（2行目と3行目）に名前空間を２つとも同じ.sizeにしたということです。

$(function () {
	$(document).on("mouseover.size", "div#test", widthFunc);
	$(document).on("click.size", "div#test", heightFunc);
				
	$("button").click(function(){
		$(document).off(".size");
	});
});

そしてoffの構文は最初に紹介したサンプル02/10_02.htmlと同じで、（）内には名前空間だけを設定します（上記6行目）。名前空間を利用すると、このように異なるイベントでもグループ化することが可能となり、まとめて外すことができるのです。

offの構文（その3）: $(調査範囲).off(名前空間)

ちなみにライブ/デリゲートの仕組みでないonでも名前空間は利用できます→サンプル（02/10_04.html）

簡単なコンテンツ作成では利用する機会は無いと思いますが、このような処理が可能ということは覚えておき必要なときに振り返りましょう。次回はjQueryでイベントがどの様に処理されるかについてお話ししたいと思います。

次のページ：イベントフロー(1)