サイトロゴ
クリックイベントをアタッチしよう！
さて、セレクターで取得した要素にイベント処理を追加してみましょう。
すでにreadyイベントに処理を追加していますね。忘れていませんか？今回はクリックイベントに処理を追加します。
「処理を追加する」ことを「アタッチする」と言います。言い換えると、今回はクリックイベントにアタッチします。
$objにはclick関数が用意されています。click関数に関数を渡せばクリックイベント発生時にその関数が実行されます。
$関数に関数を渡すとreadyイベントにアタッチされた時と同じです。
「1_6.html」のソースを見てみましょう。 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery入門研修｜クリックイベント実践</title>
</head>
<body>
	<a href="http://jquery.com/">jQuery</a>
	<script src="../js/jquery-1.11.2.min.js"></script>
	<script>
		$(function() {
			// クリックイベントにアタッチ！
		});
	</script>
</body>
</html>
まずはクリックイベントをアタッチする要素を指定しましょう。
エレメントセレクターを使ってタグ名が「a」の要素を探してください。
探し出した要素群に、click関数を使って「Hello Click!」とアラート表示する無名関数をアタッチしてください。
研修資料を読み返したり、用語集やお役立ちサイトを活用しましょう。
実装できたらここをクリックして動作確認をしましょう。ちゃんとアラートが出てからjQueryのサイトに飛びましたか？ 
$(function() {
	// クリックイベントにアタッチ！
	$("a").click(function() {
		alert("Hello Click!");
	});
});
解答例を言葉で説明すると、readyイベント時に、タグ名が「a」の要素に対して、クリックされたら、「Hello Click!」とアラートが表示される処理、をアタッチしています。
復習も兼ねて一つずつ確認していきましょう。「readyイベント時」とは「準備が出来た時」ですよね？
電車内でスマホを使っている時など、Webページの読み込みに時間がかかります。
まだページの読み込み中で、準備が整っていない時に「$("a")」とセレクターを使ってしまうと、まだa要素が読み込まれていないかもしれません。
readyイベントにアタッチすることで「準備ができている」状態で「処理」を実行することができます。
さて、その「処理」はタグ名が「a」の要素を探すことと、その要素がクリックされたら「Hello Click!」とアラートを表示させる2つあります。
1つ目の処理は「$("a")」とエレメントセレクターを使って簡単に実装できますね。
セレクターの戻り値は$objですね。$objにはclick関数が用意されています。
click関数に関数を渡すと、クリックされた時に「渡した関数」が実行されます。
「渡した関数」は無名関数で、その無名関数には「Hello Click!」とアラートを表示する処理が書かれています。
これをコードに当てはめて見てみましょう。 
$(										// $関数に
	function() {						// 無名関数（1つ目）を渡してreadyイベント発生時に実行されるようにする
		var foo = $("a");				// エレメントセレクターを使ってタグ名が「a」の要素群を探す
		foo.click(						// $objである「foo」のclick関数に
			function() {				// 無名関数（2つ目）を渡してクリックイベント発生時に実行されるようにする
				alert("Hello Click!");	// 「Hello Click!」とアラートを表示する
			}							// 2つ目の無名関数がここまで
		);								// click関数がここまで
	}									// 1つ目の無名関数がここまで
);										// $関数がここまで
ここでreadyイベント、無名関数、セレクター、$obj、そしてclick関数についてしっかり理解しておきましょう。
普段はここまでインデントを付けるようなことはしませんが、実装中に処理が見えなくなったらこの様にインデントを付けて整理すると良いでしょう。
カッコの閉じ忘れでエラーが発生することはよくあるので、次のように全て一行で書いてしまうと処理が見えにくくなります。適度にインデントを付けましょう。 
// クリックイベントにアタッチ！
$(function(){$("a").click(function(){alert("Hello Click!");});});
これで「ここがクリックされた時にこういう感じに・・・」っと言われた時、どのようにすれば良いのかわかりましたね。
まずセレクターで「ここ」を探して、その$objのclick関数に「こういう感じ」の処理（関数）を渡してあげれば良いわけです。
TOPへ戻る