jQuery入門講座使い方-ライブということ

ライブということ

clickイベント等は動的な要素の変更に対応できない

まずは「ライブ」ということを説明するために「ライブではない」例を確認します。サンプル（02/07_01.html）を開き、body内に配置されたdivにtestクラスが付けられていることを確認して下さい。

jQueryには以下の様にtestクラスのついたdiv要素をセレクタとしclickイベントを利用して、クリックしたらtestクラスのついたdiv領域にCLICK!と表示するようにしています。このサンプルは問題なく機能します。

$(function () {	
	$("div.test").click(function () {
		$("div.test").text("CLICK !");
	});			
});

次にサンプル（02/07_02.html）を開いてdivにtestクラスが付いてないことを確認して下さい。その代わりbuttonが追加されており、以下のソース2〜3行目で、buttonがクリックされたらaddClassメソッドを利用してdivにtestクラスを付加するようにしています。

htmlに記載されたcssの設定では、testクラスは背景初期に緑色の設定がされています。実際にサンプルでbuttonをクリックしてdivにtestクラスが付加され緑色になることを確認して下さい。

//---ボタンをクリックしたらtestクラスを付加
$("button").click(function(){
	$("div").addClass("test");
});
				
$("div.test").click(function () {
	$("div.test").text("CLICK !");
});

ここまでは問題ないのですが次のステップに問題があります。上記ソースの6〜8行目ではtestクラスのdiv要素にをクリックすると、testクラスのdiv要素に「CLICK!」と表示するようにしています。この部分はサンプル02/07_01.htmlと全く同じ事を確認して下さい。

しかしtestクラスのdiv領域をクリックしても機能しません。これは初心者向けのイベントであるclickイベント等はjQueryによって追加/変更された要素に設定できないためです。このような処理ができないと、インタラクティブ性の高いコンテンツを作成する事が非常に難しくなります。そこでver1.3でliveのイベントハンドラが追加されることになるのです。

まずはliveのイベントハンドラを紹介

onもliveと同じ処理が可能なのですが、デリゲートという別の仕組みと合わせて利用する必要があり少々構文が複雑になります。ですので、構文がシンプルなliveを先に紹介しておきます。サンプル（02/07_03.html）を確認して下さい。

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

最終的にonを利用するようになるので、live構文は覚えなくても構いません。しかし前回紹介したonのイベントハンドラと同じなので、以下に並べて掲載しました。上記ソースと合わせて確認して下さい。

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

イベントハンドラliveの構文: $(セレクタ).live(イベント名, イベントが発生したときに実行する処理)

では実際にサンプル02/07_02.htmlで、buttonをクリックしtestクラスを付加してからdivをクリックしてください。liveのイベントハンドラを利用すると、このようにjQueryによって後から付加した要素にもきちんと設定できるのです。このサイトでは、このように後から付加した要素に対応できることを「ライブ」とよんでいます。

デリゲートで速度の向上を狙う

なぜliveのイベントハンドラでは後から付加した要素にも対応できるかというと、イベントが発生するたびにhtmlの要素の状態を調べて対応するためです。初心者向けのclickイベント等は最初に１回だけしかhtml内の要素を確認しないため、あとから追加した要素を認識できないのです。

しかしliveにも弱点があります。html内に要素が少ないときは良いのですが、要素が多くなると調べるのに時間ががかり、イベントが発生してもすぐに処理が始まらない危険性があります（よほど要素数が多いか、スペックの低いPCでない限り気が付かないレベルだと思いますが）。

そこでver1.4.2にdelegate（デリゲートのイベントハンドラ）が追加され、liveに置き換わることになります。次回はdelegateについて説明します。

次のページ：デリゲートとon