jQueryのイベント操作のまとめ

ユーザーの操作を「イベント」といい、イベントに対して個別に処理を割り当てる。
割り当てられた処理プログラムのことを「イベントハンドラ」という。
イベントバブリングとは、イベントが泡のように親要素に伝搬することを表している。

ボタンが押されたときの処理

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
	<script>
		$(document).ready(function() {
			$(a).click(function(event) {
				alert(リンクがクリックされました);
				event.preventDefault();
			});
		});
	</script>
</head>
<body>

<a href="http://d.hatena.ne.jp/sho322/">my blog</a>
</body>
</html>

event.preventDefault()はリンクをクリックした時などに画面の遷移をキャンセルし、イベントハンドラの処理だけを実行できる。

要素のフォーカスが移ったことを検知する

.focus()やfocusin()というイベントハンドラは、要素にフォーカスが移ったときにコールされる。
.blur()とfocusout()は、要素からフォーカスが外れたときにコールされる。
郵便番号の入力とか、そういうのでajaxと組み合わせて使えそう。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
	<script>
		$(document).ready(function() {
			$(input).focusin(function(e) {
				$(input).val(ここにフォーカスが移りました!);
			});
			$(input).change(function(e) {
				var val = $(input:text).val();
				$(p).append(function() {
					return <span> + val + </span>;
				});
			});

			$(input).focusout(function(e) {
				$(input).val(フォーカスが外れました!);
			});
		});
	</script>
</head>
<body>
<input type="text" size="50">
<p></p>
</body>
</html>

inputのtextで入力された値は

var val = $(input:text).val();

の部分で取得できる。

$(input).change(〜)

の部分では、inputの内容の変化を検知して、イベント処理を行う。

フォーム送信時のイベント

送信ボタンを押されたときに、フォーム要素に入力した値を取得して、値の確認を行う。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
	<script>
		$(document).ready(function() {
			$(form).submit(function(e) {
				var text = $(#text).val();
				console.log(text);
				if (text === "error") {
					if (!confirm(errorと入力されていますが、大丈夫ですか?)) {
						e.preventDefault();
						return;
					}
				}
				alert(text + "を送信します!");
			})
		});
	</script>
</head>
<body>
<form method="get" action="#" name="form">
	<input type="text" id="text" name="name" value="">
	<input type="submit" name="submit" value="送信">
</form>
<p></p>
</body>
</html>

form要素の中のテキストの内容を取得しているのは

var text = $(#text).val();

の部分。idと紐付けている。

参考書籍

jQuery ポケットリファレンス (POCKET REFERENCE)

jQuery ポケットリファレンス (POCKET REFERENCE)

  • 作者: 鶴田展之
  • 出版社/メーカー: 技術評論社
  • 発売日: 2010/06/18
  • メディア: 単行本(ソフトカバー)
  • 購入: 2人 クリック: 74回
  • この商品を含むブログ (6件) を見る

様々な例が「ちゃんと動く」形で載っている貴重な本。
ちょっと何かを作りたい時に大いに参考になる。

感謝のプログラミング

今回で感謝のプログラミングは【501時間目】
10000時間まで、あと【9499時間】