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

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

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

構文

イベント発生時の処理を解除します返値:jQueryオブジェクト
jQo.die( イベント名 [, function] )ver1.3〜1.8.2
jQo.die( )ver1.4.1〜1.8.2
jQo.die( 複数のイベント名 )ver1.4.3〜1.8.2
※ver1.9で廃止されました

機能

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

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

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

dieメソッドはliveメソッドの廃止に伴いv1.9で廃止となりました。代わりにoffメソッドを利用してください。

解説

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

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

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

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

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

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

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

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

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

functionを指定して解除

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

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

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

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

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

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

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

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

jQueryでは以下の部分に着目してください。liveメソッドでfunctionを設定した際に受け取ったイベントオブジェクト「eo」をdieメソッドの引数として利用しています。

$("div").live("click", function(eo){
	alert("die");
	$(this).die(eo);
});

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

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

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

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

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

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

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

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

$("button").click(function(){
	$("div").die("mouseenter mouseleave");
});

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

関連項目

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

メモ

unbindと比較して

本家のページのunbinddieメソッドを比較すると構成が結構異なっています。しかし実際はほとんど同じです。

例えばunbindメソッドでは複数のイベント名を設定する構文は紹介されていませんが、実際には利用できます。サンプル(die/test01.html)では以下の様にunbindの引数にmouseenterとmouseleaveを設定していますが、dieメソッドのサンプル(die/05.html)と同じように機能します。

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