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

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.undelegate( )イベント発生時の処理を解除します

構文

イベント発生時の処理を解除します返値:jQueryオブジェクト
調査範囲.undelegate( )ver1.4.2〜
調査範囲.undelegate( セレクタ, イベント名 )ver1.4.2〜
調査範囲.undelegate( セレクタ, イベント名, function )ver1.4.2〜
調査範囲.undelegate( セレクタ, 複数のイベント名 )ver1.4.3〜
調査範囲はjQueryオブジェクトにしないといけません。

機能

undelegateの機能を理解するためにはdelegateを理解している必要があります。

delegateメソッドによって設定されたイベント発生時の処理を解除します。引数に何も設定しない場合は、調査範囲内のdelegateメソッドによって設定されたイベント発生時の処理を「すべて解除」し、引数にセレクタとイベント名を設定した場合は調査範囲内のセレクタに設定されたイベントの処理だけを解除します。また第3引数にfunctionを設定して、特定のfunctionだけを解除することもできます。

delegateメソッドを利用して設定したfunctionのイベントオブジェクトを引数に設定すると、そのfunctionだけを解除することができます。ver1.4.3からは引数に複数のイベント名を設定して、まとめて解除することができます。

現在ではあまり利用せずにoffを利用するようにしてください。

解説

イベント発生時に実行する処理をすべて解除

undelegateメソッドは引数を設定しないと、調査範囲内にあるdelegateメソッドによって設定されたイベント発生時の処理をすべて解除します。サンプル(undelegate/01.html)を開いてbody内にdiv要素が3つとbutton要素があることを確認してください。

jQueryでは以下の様に、3つのdiv要素にそれぞれdelegateメソッドbindメソッドでクリックしたらアラートを表示するfunctionを設定しています(3つのdiv要素の内訳は、delegateが2つbindが1つです)。

$("body").delegate("div.aaa", "click", function(eo){
	alert("aaa");
});
$("body").delegate("div.bbb", "click", function(eo){
	alert("bbb");
});
$("div.ccc").bind("click", function(eo){
	alert("ccc");
});

ポイントは以下の部分です。undelegateメソッドで引数を設定していないため、buttonをクリックすると、調査範囲(body要素)内に存在するdelegateメソッドで設定した全てのfunctionが解除されます。

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

結果として、buttonをクリックするとbindメソッドで設定した一番下のdiv要素以外はイベント発生時の処理が解除され、クリックしてもアラートが表示されなくなります。

セレクタとイベント名を指定してイベント発生時に実行する処理を解除

undelegateメソッドは引数にセレクタとイベント名を設定すると、(調査範囲内にある)そのセレクタのイベントに設定された処理のみを解除します。サンプル(undelegate/02.html)を開いてbody内にdiv要素とbutton要素があることを確認してください。

続いてjQueryでは、delegateメソッドを利用してclickとmouseenter, mouseleaveのイベントが設定されていることを確認して下さい。そしてポイントは以下の部分です。buttonをクリックするとundelegateメソッドでイベント発生時の処理を解除します。このとき引数にセレクタ(div)とイベント名(click)が設定してあるので、div要素に設定したクリック発生時の処理だけが解除されます。

$("button").click(function(){
	$("body").undelegate("div", "click");
});

結果として、buttonをクリックするとdiv要素をクリックしてもアラートがでなくなります。クリック以外のイベント(mouseenter, mouseleave)の処理は解除されません。

functionを指定して解除

第3引数にfunctionを指定することで、そのfunctionだけを解除することができます
サンプル(undelegate/03.html)を開いてbody内にdiv要素とbutton要素があることを確認してください。

jQueryは以下の様に記述され、delegateメソッドを利用してclickのイベントに2つのfunction(aaaFuncとbbbFunc)を設定しています。そのためdiv要素をクリックするとアラートが2回表示されます。

$("body").delegate("div", "click", aaaFunc);
$("body").delegate("div", "click", bbbFunc);

そしてundelegateメソッドの処理は以下の様に第3引数に「aaaFunc」と設定しています。
その結果、buttonをクリックするとaaaFuncだけが解除され、div要素をクリックしても「bbb」とbbbFuncのアラートしか表示されなくなります。

$("button").click(function(){
	$("body").undelegate("div", "click", aaaFunc);
});

この構文はfunction名を指定するため、無名関数で設定された処理には利用できません。しかし名前空間を利用すれば、無名関数でも解除することが可能になります。→参考:使い方「イベントを外す」

イベントオブジェクトを利用してfunctionを解除

delegateメソッドで設定したfunctionが受け取るイベントオブジェクトを利用することで、そのfunctionだけを削除することができます。サンプル(undelegate/04.html)を開いてbody内にはdiv要素しかないことを確認して下さい。

jQueryでは以下の部分に着目してください。delegateメソッドで設定したfunctionが受け取ったイベントオブジェクト「eo」をundelegateメソッドの引数として利用しています(thisはクリックされたdiv要素になります)。

$("body").delegate("div", "click", function(eo){
	alert("undelegate");
	$(this).undelegate(eo);
});

その結果、div要素をクリックすると「undelegate」とアラートで表示し、このfunction自身を解除します。そのため2回目のクリックでは「undelegate」とアラートは表示されません。

特定のfunctionだけが解除されたことを確認できるように、以下の処理も設定されています。

$("body").delegate("div", "click", function(eo){
	alert("aaa")
});

2回目以降のクリックでも「aaa」とアラートが表示されるので、「undelegate」と表示するfunctionだけが解除されたのが確認できます。

これは1回だけfunctionを実行したい時に便利な手法ですが、v1.7で1回しかfunctionを実行しないoneが動的な要素に対応したため、使う機会は無いと思います。

複数のイベントからまとめてイベント発生時の処理を解除

v1.4.3から引数に複数のイベント名を設定して、まとめてイベント発生時の処理を解除できるようになりました。 サンプル(undelegate/05.html)を開いてbody内の構成がundelegate/02.htmlと同じ事を確認して下さい。

jQueryもほとんどundelegate/02.htmlと同じで、異なるのは以下の様に引数に複数のイベント名が設定されている点です(各イベント名は半角スペースで区切ります)。

$("button").click(function(){
	$("body").undelegate("div", "mouseenter mouseleave");
});

結果として、buttonをクリックすると「mouseenter」と「mouseleave」のイベント発生時の処理が解除されます(clickの処理は残ります)。

関連項目

undelegateメソッドを理解するためには、イベント発生時の処理を設定するdelegateメソッドを先に理解するようにしてください。

メモ

引数にセレクタだけを指定することはできません

引数にセレクタだけを指定する構文があっても良さそうだと思って確認してみました。
サンプル(undelegate/test01.html)を開いてbody内の構成はundelegate/02.htmlと同じ事を確認して下さい。jQueryもほとんどundelegate/02.htmlと同じで、以下の引数にセレクタだけを設定している部分が異なるだけです。

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

これでbuttonをクリックするとdiv要素のすべてのイベント発生時の処理が解除されても良さそうなのですが、実際は機能しません(本家サイトに載ってないので機能しなくて当然なのですが...)。

引数にイベントだけを指定することはできます

しかし引数にイベント名だけを設定することはできるようです。本家サイトの説明ページ上部にある構文には載っていないのですが、下の方にサンプルとして載っています。

そのサンプルを参考に作成したサンプル(undelegate/test01b.html)を開いてソースを確認して下さい。ほとんどundelegate/test01.htmlと同じで、以下の部分だけが異なります。引数にセレクタを設定するのではなくイベント名を設定します。

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

結果として、buttonをクリックするとクリック発生時の処理だけが解除され、div要素をクリックしてもアラートが出なくなります。