jQuery入門講座使い方-clickイベント

clickイベント

初心者用のイベント

私はjQueryのイベントは２つに分類できると考えています。１つは初心者向けにシンプルな機能を簡単に設定できるイベント。もう１つは高度なプログラムに対応できる高機能なイベントです。ここではまず、初心者向けの簡単に利用できるイベントを紹介したいと思います。

クリックイベント

イベントについてはreadyイベントの所で簡単に説明しました。イベントとは処理をいつ実行するか設定する仕組みです。readyイベントはセレクタにdocumentを設定しhtmlファイルの読み込みが完了したときに実行する処理を設定しました。

今回紹介するクリックのイベントも考え方は全く同じです。サンプル（02/01_01.html）を開いて下さい。青い領域がありますが、この部分をクリックすると「click!」と表示されます。青い部分はただのdiv領域でcssによって大きさと背景色が設定されているだけです。

jQueryのソースは以下の様になっています。readyイベントと比較できるように省略構文は利用していません。クリックのイベントは以下の様にclickイベントを利用します。

jQuery(document).ready(function () {	
	jQuery("div").click(function () {
		$("div").text("CLICK !");
	});			
});

２つのイベントの構文をよく観察して以下の様な構文になっていることを確認して下さい。メソッドの構文と似ていますが、イベントに続く（）内にはfunctionを設定する点に注意して下さい。このfunctionに、イベントが発生したときに実行したい処理を書いておくのです。今回のサンプルではクリックされたら、divにtext(val)メソッドを利用してdivに文字を表示します。
readyイベントの所で説明したようにdocumentには（ダブル）クォートが必要ないことに注意して下さい。

イベントの構文: jQuery(セレクタ).イベント(イベントが発生したときに実行したい処理)

readyイベントと構文が同じ事を確認したら、サンプル（02/01_02.html）で省略構文も確認しておきましょう。単純にjQueryを$に置き換えるだけです（readyイベントのような省略はできません）。

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

あらかじめfunctionを用意してもOKです

readyイベントの所でも説明したように、無名関数を利用するのではなくfunctionをあらかじめ作成し、それをイベントに設定することも可能です。サンプル（02/01_03.html）のソースを確認して下さい。イベントの()内のfunctionは設定するだけなので()は必要なかったことを思い出して下さい。

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

readyイベントの外でもjQueryは利用できます

初心者が勘違いしやすいこととして「readyイベントの外でjQueryは利用できない」というものがあります。しかし、それは誤解です。サンプル（02/01_03.html）では2行目の「$("div").text("CLICK !");」はreadyイベントの外にありますが、きちんと機能しています。

これは順番の問題なのです。1〜3行目で作成された関数clickFuncは、readyイベント内のclickイベントから実行されます。つまりreadyイベントの外にあっても、readyイベントの後で実行されるので問題なく機能するというわけです。実行の順番さえreadyイベントの後であれば、readyイベントの外でもjQueryは利用できます。また、ページ内の要素を操作するような処理でなければreadyイベントの外でも実行可能です。

クリックなどのイベントは複数のボタンにまとめて設定する場合が多くなります。その際、どのボタンがクリックされたかをきちんと認識しなければなりません。それには次回紹介するthisが非常に役立ちます。

次のページ：thisについて