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

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

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

構文

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

機能

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

onメソッドによって設定されたイベント発生時の処理を解除します。引数に何も設定しない場合は、調査範囲内のonメソッドによって設定されたイベント発生時の処理を「すべて解除」します。

引数にイベント名だけを指定した場合は、調査範囲内のonメソッドによって設定された、そのイベントの処理を全て解除します。引数にイベント名とセレクタを設定した場合は、調査範囲内のセレクタに設定された、そのイベントの処理だけを解除します。イベント名は半角スペースで区切ることで複数設定することができます。

また第3引数にfunctionを設定して、特定のfunctionだけを解除することもできます。さらにonメソッドで設定したfunctionが受け取るイベントオブジェクトを引数に設定すると、そのfunctionだけを解除することができます。

解説

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

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

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

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

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

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

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

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

offメソッドは引数にイベント名だけを設定すると、(調査範囲内にある)そのイベントに設定されたfunctionだけを解除します。サンプル(off/02.html)を開いてbody内に2つのdiv要素(aaaとbbbのclass属性)とbutton要素があることを確認してください。

<div class="aaa">aaa</div>
<div class="bbb">bbb</div>

jQueryでは、onメソッドを利用してaaaのクラス属性を持つdiv要素にclickとmouseenter, mouseleaveのイベントの処理が設定されていることを確認して下さい。bbbのクラス属性を持つdiv要素にはclickのイベントしか設定されていません。

//----「aaa」のクラス属性を持つdiv要素へのイベント設定
$("body").on("click", "div.aaa", function(eo){
	alert("aaa");
});
$("body").on("mouseenter", "div.aaa", function(eo){
	$(this).css("background-color","#f93");
});
$("body").on("mouseleave", "div.aaa", function(eo){
	$(this).css("background-color","#09c");
});
//----「bbb」のクラス属性を持つdiv要素へのイベント設定
$("body").on("click", "div.bbb", function(eo){
	alert("bbb");
});

そしてポイントは以下の部分です。buttonをクリックするとoffメソッドで、調査範囲(body要素)内にあるすべてのクリック発生時の処理のみが解除されます。

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

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

イベント名とセレクタを指定してfunctionを解除

offメソッドは引数にイベント名とセレクタを設定すると、(調査範囲内にある)指定したセレクタのイベントに設定された処理を解除します。サンプル(off/03.html)を開いてbody内の構成がoff/02.htmlと同じことを確認してください。jQueryもほとんど同じで、異なるのは以下の様に第2引数にセレクタが追加されているだけです。

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

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

functionを指定して解除

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

引数に複数のイベント名を設定して、イベント発生時の処理をまとめて解除することができます。
サンプル(off/06.html)を開いてbody内のdiv要素とbutton要素があることを確認して下さい。jQueryでは以下の様に、div要素にclickとmouseenter, mouseleaveのイベントが設定されています。

$("body").on("click", "div", function(eo){
	alert("click");
});
$("body").on("mouseenter", "div", function(eo){
	$(this).css("background-color","#f93");
});
$("body").on("mouseleave", "div", function(eo){
	$(this).css("background-color","#09c");
});

そしてポイントはoffメソッドの処理です、以下の様にイベント名を設定する部分に複数のイベント名を設定しています(各イベント名は半角スペースで区切ります)。

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

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

onメソッドで設定したfalseの機能を解除する

onメソッドのfunctionを設定する部分にfalseを設定すると、イベントフローとブラウザ本来の機能も停止させることができました。offメソッドでは、この設定を解除できます。サンプル(off/07.html)を開いてbody内にyahooへのリンクを設定したa要素とbutton要素があることを確認して下さい。

jQueryでは、まず以下の部分を確認してください。onメソッドを利用してa要素にクリックのイベントを設定していますが、functionを設定する部分にfalseを設定しています。そのためa要素をクリックしてもリンクしません。

$("body").on("click", "a", false);

続いて以下の部分を確認してください。button要素をクリックした時の処理として、offメソッドを利用しています。このときfunctionを設定する部分にfalseを設定しました。

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

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

関連項目

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

メモ

falseを利用した機能について

サンプル(off/07.html)で利用した、functionの所にfalseを利用してonで設定したfalseの機能を解除する構文ですが、これはfunction内に設定された「return false」を解除することはできません

サンプル(off/test01.html)を開いてbody内の構成がoff/07.htmlと同じ事を確認して下さい。jQueryもほとんど同じで、異なっているのはonメソッドでクリック時の処理を設定している以下の部分だけです。functionの部分にfalseを設定するのではなく、そのfunction内にreturn falseを設定しています。

$("body").on("click", "a", function(){
	$(this).text("クリックされたよ");
	return false;
});

この場合はoffメソッドを利用してfalseの機能を解除できません。実際にbuttonをクリックして、a要素をクリックしてみてください。リンクしないことからfalseの機能が解除できていないことが確認できます。

もしoff/test01.htmlでfalseの機能を解除したい場合は、サンプル(off/test01b.html)のようにfalseの部分を分ける必要があります。

$("body").on("click", "a", false);		
$("body").on("click", "a", function(){
	$(this).text("クリックされたよ");
});

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

引数にセレクタだけを指定する構文があっても良さそうだと思って確認してみました。
サンプル(off/test02.html)を開いてbody内の構成はoff/06.htmlと同じ事を確認して下さい。jQueryは以下の様に記述され、引数にセレクタだけを設定しています。

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

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