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

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

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

構文

イベント発生時の処理を解除します返値:jQueryオブジェクト
jQo.unbind( [イベント名] [, function])ver1.0〜
jQo.unbind( eventObject )ver1.0〜
jQo.unbind( イベント名, false)ver1.4.3〜

機能

unbindメソッドの機能を理解するためにはbindメソッドを理解している必要があります。

bindメソッドによって設定されたイベント発生時の処理を解除します。引数に何も設定しない場合は、要素に設定されたイベント発生時の処理を「すべて解除」し、引数にイベント名を設定した場合は、そのイベントに設定された処理だけを解除します。また第2引数にfunctionを設定して、特定のfunctionだけを解除することもできます。

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

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

解説

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

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

続いてjQueryでは、bindメソッドを利用してclickとmouseenter, mouseleaveのイベントが設定されていることを確認して下さい。そしてポイントは以下の部分です。buttonをクリックするとunbindメソッドでイベント発生時に実行する処理を解除します。このとき引数を設定していないので、すべての処理が解除されます。

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

結果として、buttonをクリックするとdiv要素はclickやmouseenter,mouseleaveに反応しなくなります。

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

unbindメソッドは引数にイベント名を設定すると、そのイベントが発生した時の処理のみを解除します
サンプル(unbind/02.html)を開いてbody内の構成はunbind/01.htmlと同じ事を確認してください。jQueryもほとんどunbind/01.htmlと同じで、異なるのは以下の様に引数に「click」と設定していることだけです。

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

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

functionを指定して解除

第2引数にfunctionを指定することで、そのfunctionだけを解除することができます
サンプル(unbind/03.html)を開いてbody内の構成はunbind/01.htmlと同じ事を確認してください。

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

$("div").bind("click", aaaFunc);
$("div").bind("click", bbbFunc);

そしてunbindメソッドでは以下の様に第2引数に「aaaFunc」と設定しています(クォートは必要ないことに注意してください)。 その結果、buttonをクリックするとclickのイベントに設定された「aaaFunc」だけが解除され、div要素をクリックしても「bbb」とbbbFuncのアラートしか表示されなくなります。

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

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

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

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

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

$("div").bind("click", function(eo){
	alert("unbind");
	$(this).unbind(eo);
});

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

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

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

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

これは1回だけfunctionを実行したい時に便利な手法ですが、v1.1で1回しかfunctionを実行しないoneメソッドが登場したため、使う機会は無いと思います。

第2引数にfalseを設定

v1.4.3から追加された構文で、bindメソッドの第2引数にfalseを設定してイベントフローとブラウザ本来の機能も停止させたのを解除できます。

サンプル(unbind/05.html)を開いてbody内にyahooへのリンクを設定したa要素とbutton要素があることを確認して下さい。jQuertではまず以下の部分を確認してください。a要素にクリックのイベントを設定していますが、第2引数にfalseを設定しています。そのため、a要素をクリックしてもリンクしません。

$("a").bind("click", false);

button要素には以下の様に記述され、第2引数の部分にfalseを設定してあります。

$("button").click(function(){
	$("a").unbind("click", false);
});

結果として、buttonをクリックするとbindメソッドで設定したfalseの設定が解除され、a要素をクリックするとリンクするようになります。

関連項目

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