jQuery入門講座使い方-イベントを外す

イベントを外す

１つの対象に複数のイベントを設定

複雑なコンテンツを効率よく作成するためには、イベントを自由に付けたり外したりできる必要があります。jQueryもそのようになっており、高度なコンテンツ作成に対応することができます。このページではjQueryの持つ高度なイベント管理について説明していきます。

まずは１つの要素に対し複数の同じイベントが設定できることを紹介します。サンプル（02/09_01.html）を確認して下さい。このサンプルではdiv領域をクリックすると幅と高さが10pxずつ増えていきます。

ではソースのjQueryを確認していきましょう。まずはdivの高さや幅を変更しているwidthFuncとheightFuncの説明をします。ここではheight()メソッドとwidth()メソッドを使ってdivの幅や高さを変更しています。

widthFuncとheightFuncは考え方が同じなのでwidthFuncのみ説明します。以下のソース2行目のwidth()メソッドによってthis（クリックされたdiv領域）の幅の値を取得し、変数myWidthに格納しています。3行目でmyWidthに10足し、４行目でクリックされたdiv領域の幅を設定します。つまりwidthFuncが実行される度に10pxずつ大きくなっていきます。

function widthFunc() {
	var myWidth = $(this).width()
	myWidth += 10;
	$(this).width(myWidth);
}

ちなみにwidthやheightメソッドも１章で紹介したtext()メソッドのように引数を設定するか否かで返値が異なります。width()やheight()のように引数を設定しない場合は情報の取得となり、返値は幅の数値となります。
width(val)やheight(val)のように引数を設定すると幅を変更した対象（jQueryオブジェクト）が返値となります。

このサンプルのポイントは以下のイベントの設定部分です。以下の様に１つの要素（idがtextのdiv）の１つのイベント（clickイベント）に対し複数の処理（widthFuncとheightFunc）が設定できるのです。

$(document).on("click", "div#test", widthFunc);
$(document).on("click", "div#test", heightFunc);

シンプルなコンテンツでは利用機会はないと思うのですが、このようなことができることは覚えておいて下さい。要素数が少ないのでdelegateは必要ないかもしれませんが、慣れるためにdelegateの構文にしました。要素数が少ないので調査範囲はdocumentにしています。

イベントの削除

onで要素に付けたイベントはoffで削除することができます。サンプル（02/09_02.html）を確認して下さい。body内にbuttonが１つ追加され、jQueryには以下の処理が追加されています。offは引数に色々な設定ができるのですが、ここでは以下の構文を紹介します。

offの構文（その1）: $(調査範囲).off(イベント名, イベントを外したい要素)

サンプル02/09_02.htmlでは以下のソースのように、第１引数にイベント（click）を指定し、第２引数にセレクタを設定しています。onの構文と異なり第３引数に実行する処理は必要ありません。この構文を利用すると調査範囲においてセレクタ"div#test"に設定されたclickのイベントが全て外れます。結果として、offボタンをクリックしたあとは、divをクリックしても高さや幅が変更されなくなります。

$("button").click(function(){
	$(document).off("click", "div#test");
});

処理名を指定したイベントの削除

offの引数はさらに細かく設定でき、以下の様に第3引数に外したいfunction名を設定することで、そのfunctionだけを外すことができます。

offの構文（その2）: $(調査範囲).off(イベント名, イベントを外したい要素, 外したいfunction名)

サンプル（02/09_03.html）では以下のソースのように第３引数にheightFuncと書いているのでheightFuncだけが削除されます。結果としてoffボタンをクリックしたあとはdivをクリックしても幅しか伸びなくなります。

$(document).off("click", "div#test", heightFunc);

異なるイベントをまとめて削除したいのですが...

offの高機能さを説明してきましたが、効率よくイベントを外せないケースもあるのです。サンプル（02/09_04.html）を開いて下さい。このサンプルはこれまでのサンプルとすこし異なり、divにマウスオーバーしたら横幅が増え、クリックすると高さが増えるようになっています。

サンプルのソースで以下の部分を確認して下さい。１つの要素に複数のイベントを設定できることはサンプル（02/09_01.html）で説明しましたが、これは異なるイベントでも可能です。このサンプルでは以下の様にmouseoverでwidthFuncを実行し、clickでheightFuncを実行するようにしています。

$(function () {
	$(document).on("mouseover", "div#test", widthFunc);
	$(document).on("click", "div#test", heightFunc);
});

つづいてoffの設定をしている以下のソースを確認して下さい。offだけでは異なるイベントをまとめて外すことはできないので、この様にmouseoverとclickのイベント毎にoffを書かなければなりません。

$("button").click(function(){
	$(document).off("mouseover", "div#test");
	$(document).off("click", "div#test");
});

これでも不自由ではないのですが、次回紹介する名前空間を利用すると、異なるイベントでもまとめて外すことができるようになります。ちなみにliveやdelegateの仕組みを持っていない、覚える必要のないonの構文では、イベントが異なってもまとめて外すことができます。参考までにサンプルを作成しました→02/09_05.html。

jQueryのon/offは自由にイベントを付けたり外したりが可能となります。しかし、ここで紹介したサンプルではonで追加したイベントはあらかじめfunctionを作成したため、offで処理名を指定して削除できました。しかし無名関数を利用した場合は処理名がないため、指定して処理を外すことができません。そこで用意されているのが名前空間という仕組みです。次回は名前空間について説明します。

次のページ：名前空間