jQuery入門講座使い方-デリゲートとon

デリゲートとon

対象範囲を絞ることで高速化

liveによるイベント設定はとても便利なのですが、通常のイベントが最初に一回html内の要素を確認すれば良いのに対し、liveは要素の変化に対応するため、イベントが発生するたびに要素の確認をしなければいけません。そのため速度的な問題があります（html内の要素数が少なければ問題ないと思います）。

この問題に対処するためにver1.4.2からdelegateが追加されました。これは要素を調べる範囲を限定することで高速化を実現しています。構文は以下の様に、これまでのセレクタの部分に調べる範囲を設定しdelegateの()内の第１引数に実際にイベントを設定する要素（セレクタ）を書きます。そのため引数はliveよりも１つ多く3つとなります。

delegateとliveの比較: liveの構文：$(セレクタ).live(イベント名, イベントが発生したときに実行する処理)
　　↓
delegateの構文：$(調査範囲).delegate(セレクタ, イベント名, イベントが発生したときに実行する処理)

実際にliveとdelegateをサンプルで比較しましょう。まずはliveのサンプル（02/08_01.html）のbody部分を確認して下さい。idがtestAreaとbuttonAreaの２つのdivに分かれてbuttonクラスが付いたdivが配置されています。liveで設定したセレクタは以下の様にbuttonクラスの付いたdivなので、idがtestAreaとbuttonAreaの両方のdivにclickイベントが設定されます。実際にどのdivをクリックしても"CLICK!"と表示されます。

$("div.button").live("click", function(){
	$(this).text("CLICK !");
});

つづいてdelegateのサンプル（02/08_02.html）を確認しましょう。body部分は変更ありません。jQueryは以下の様にdelegateが利用され、調査範囲がbuttonAreaのidとなっています。そのため上段（idがtestArea）のdivはクリックしても調査されず、反応しないことを確認して下さい。

このサンプルから、delegateは調査範囲のセレクタにしか調べていないことが確認できます。調査範囲を絞って高速な分、広範囲に一度にイベントを設定できないデメリットがあるとも考えられるのですが、広範囲に同じイベントを設定することはほとんど無いと思うので問題ないでしょう。

$("#buttonArea").delegate("div.button","click", function(){
	$(this).text("CLICK !");
});

onの構文（その2）

以前紹介したonの構文（その1）はliveの機能もdelegateの機能も持っていません。onでliveやdelegateの仕組みを利用するためには、ここで紹介する構文を利用します。delegateの構文と非常に似ているのですが、以下のように（）内の順番（セレクタとイベントの位置）がdelegateと異なるので間違えないようにしましょう。delegateはもうonに置き換わるので、delegateの構文は覚えずにonの構文を覚えればよいと思います。

イベントハンドラonの構文（その2）: $(調査範囲).on(イベント名, セレクタ, 実行する処理)
※delegateの構文：$(調査範囲).delegate(セレクタ, イベント名, イベントが発生したときに実行する処理)

サンプル（02/08_03.html）でonがdelegateの機能を持っていることを確認しましょう。delegateと同じようにidがbuttonAreaのdivにしかイベントが設定されていないことが確認できます。

$("#buttonArea").on("click","div.button", function(){
	$(this).text("CLICK !");
});

ほとんど必要ないのですが、liveのように全範囲にまとめてイベントを設定する場合は以下の様に調査範囲にdocumentを利用します。サンプル（02/08_04.html）を開いて以下のソースと同じになっていることを確認し、すべてのdivがクリックできることを確認して下さい。

$(document).on("click","div.button", function(){
	$(this).text("CLICK !");
});

（効率よくliveするためにdelegateができたので、delegateできる時点でliveなのですけど）一応liveであることも確認できるonのサンプルを用意しました。サンプル（02/08_05.html）を確認して下さい。前回のサンプルと同じように、buttonをクリックしてdivにtestクラスを付けて緑色にして下さい。そのあとでdivをクリックするとCLICKと表示されます。このように後から追加した要素に対してもイベントが有効なのでliveの機能が確認できます（調査範囲を絞るほど要素がないので調査範囲はdocumentにしています）。

最後にthisについてで説明したsplitと合わせたサンプルを紹介します。サンプル（02/08_06.html）を確認して下さい。５つのボタンを模したdivにはidが設定（menu_1〜menu_5）され、クリックしたらアラートでid名の数値部分だけを表示するようにしています。メニューのボタンはまとめてdiv（サンプルではidがmenuAreaのdiv）で囲まれている場合がほとんどだと思うので、デリゲートの仕組みを利用するのに好都合なのです。

onの構文の使い分け

比較的高機能なコンテンツを作成する場合は、今回説明したliveやdelegateの機能を持つonの構文を利用します。一番最初に紹介したonの構文はliveの機能はないため、比較的シンプルなコンテンツ作成での利用になると思います。しかし、それであればclickイベントやhoverイベント、toggleイベントなどを利用すれば良いので、使う機会はあまり無いと思います。まとめるとliveやdelegateの仕組みが必要な場合はon、それ以外の場合は用途に合わせてclick,hover,toggleなどのイベントを利用すればよいと思います。

次回は設定したイベントを外すoffのイベントハンドラについて説明します。

次のページ：イベントを外す