デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
1章:jQuery入門
2章:jQuery基礎
3章:jQuery発展
番外編:研究

イベントに設定されたの無名関数をoffで外す

概要

名前空間を利用します

offを利用すると、イベントからfunctionを外すことができます。しかし同一のイベントに複数のfunctionが無名関数で設定されているとfunction名が指定できず、処理を外すことができません。そのような時に利用する名前空間のテクニックを紹介します。※名前空間は、ここで紹介する用法の他にも色々利用できるそうです。

解説

処理を外せないサンプル

まずはイベントから処理を外せないサンプルを確認します。サンプル(off/01.html)のソースを開いて、body内にdiv要素とbutton要素があることを確認して下さい。

jQueryでは、まず以下の部分を確認してください。onを利用してdiv要素をクリックした時に2つの処理(幅を10px追加/高さを10px追加)するようにしています。そのためdiv要素をクリックすると幅と高さが拡がります。

$("body").on("click", "div", function(){
	$(this).width("+=10");
});
$("body").on("click", "div", function(){
	$(this).height("+=10");
});

このように無名関数で同じイベント(click)に処理が設定された場合、片方だけの処理を外すことはできません。サンプルではbuttonがクリックされた時の処理で以下の様に記述していますが、これではclickイベントに設定された全てのfunctionが外されてしまいます。

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

しかし名前空間を利用することで、同じイベントに設定した特定のfunctionを外すことができるようになります。

名前空間を利用したサンプル

サンプル(off/02.html)のソースを開いて、body内の構成はoff/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、イベント名の横にカンマに挟んで「width」や「height」と文字が追加されています。これが名前空間の指定で、イベントに対してラベルを付ける処理になります。

$("body").on("click.width", "div", function(){
	$(this).width("+=10");
});
$("body").on("click.height", "div", function(){
	$(this).height("+=10");
});

offは引数に名前空間を指定できるので、以下の様に記述することでbuttonをクリックした時に「.height」の指定をしたclickイベントからのみfunctionを外すことができます(heightの前にある「.(ドット)」を忘れないで下さい)。

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

結果として、buttonをクリックすると高さを追加する処理だけが外れて、div要素をクリックしても幅しか拡がらないようになります。このように名前空間を利用すれば同じイベントに設定した無名関数も個別に外すことができるようになります。

イベントのグループ化

名前空間を利用するとイベントをグループ化することができます。サンプル(off/03.html)のソースを開いて、body内の構成はoff/01.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、名前空間が両方とも「.height」になっていることを確認して下さい。さらにイベントも変更され、一方はmouseenterイベントを利用しています。

$("body").on("click.height", "div", function(){
	$(this).height("+=10");
});
$("body").on("mouseenter.height", "div", function(){
	$(this).height("+=10");
});

この処理によって、clickの処理とmouseenterの処理が名前空間「.height」によってグループ化されます。その結果、以下の様にoffを利用することで、異なるイベントの処理でもまとめて外すことができるようになります。

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

名前空間は他にも色々利用できるらしいので、調べが付き次第追加しようと思います。次回はスマートフォン用アプリを作成する際に利用するcssアニメをjQueryで制御する方法ついて説明します。