[JS] イベントについて

タグ :

jQuery の勉強をまとめるシリーズです。
今回は動的にイベント処理の API についてまとめます。

過去記事でも何回か使用してきましたが jQuery でボタンをクリックしたときの処理は「click()」というイベントを使用してきました。
jQuery ではクリックイベントとして動作させる場合はこの「click()」を使用しますが、その他にもイベント処理は用意されています。

マウスオーバーイベント

jQuery でマウスを html 要素上に移動したり、その要素外に移動したときのイベントは「hover()」を使用します。
引数には、その要素上に移動したとき(マウスオーバー時)と外れたとき(マウスアウト時)のイベント処理の両方を指定します。

[ 構文 ]
.hover(マウスオーバー時の処理, マウスアウト時の処理)
[ コード ]
$(function() {
	$("div").hover(
		function() {
			$(this).addClass("boxRed");
			$(this).text("マウスオーバー");
		},
		function() {
			$(this).removeClass("boxRed");
			$(this).text("マウスアウト");
		}
	);
});

3行目〜6行目が hover() のマウスオーバー時の処理、
7行目〜10行目が hover() のマウスアウト時の処理。

<h4>マウスオーバー時のイベント</h4>
<div class="boxBlue">マウスアウト</div>

2行目の div 領域へのマウス移動で動作します。

.boxBlue {
	background: blue;
	width: 100px;
	height: 100px;
}
.boxRed {
	background: red;
	width: 120px;
	height: 120px;
}

それぞれ背景色、幅、高さのスタイルになります。

<div class="boxBlue boxRed">マウスオーバー</div>

クラスの追加とテキストが変更されます。

ボックスにマウスカーソルを合わせるとマウスイベントが動作し、クラスが変更されます。
ボックスの色が赤へ、サイズが少し大きく、さらにテキストが変更されます。
この例ではクラスの追加のみで「boxBlue」の後ろに「boxRed」が追加され、結果、後に設定された「boxRed」が適用されています。使うときは既存のクラスを除去してから追加すると良いと思います。
また、div 要素にテキストが記述されているので、これも「p」タグを挿入してあげると良いと思います。

マウスの移動で色々な動作が起こると楽しいですね。
見ている人を飽きさせないという点において、このイベントは必須だと思います。

フォーカスイベント

jQuery で html オブジェクトであるテキストボックスにフォーカスが移動したときのイベントとして「focus()」と「blur()」が用意されています。
focus() はその名の通りフォーカスが移動したときのイベントです。
blur() とはフォーカスが外れたときのイベントになります。

[ 構文 ]
.focus(フォーカス時の処理)
.blur(フォーカスが外れた時の処理)
[ コード ]
$(function() {
	$("input:text").focus(function() {
		$(this).addClass("boxPink");
	});
	$("input:text").blur(function() {
		$(this).removeClass("boxPink");
	});
});

3行目がフォーカス時の処理、6行目がフォーカスが外れた時の処理。

<h4>フォーカス時のイベント</h4>
テキスト1<input type="text" /><br>
テキスト2<input type="text" />

2,3行目のテキストボックスのフォーカスで動作します。

.boxPink {
	background: mistyrose;
}

背景色のスタイルになります。

テキスト1<input type="text" class="boxPink" /><br>
テキスト2<input type="text" />

フォーカスされたテキストボックスへクラスが追加されます。

テキストボックスをクリックしてフォーカスを移すと、そのテキストボックスの背景色が変更されます。フォーカスを外すと元の背景色に戻ります。
たくさんの入力フォームがある場合、どのテキストボックスがフォーカスになっているかが分かりづらい場合があるので、この処理のように色を付けてあげて分かりやすくすることでユーザビリティの向上になると思います。

まとめ

イベント処理は最もよく多用する機能であると言っても過言ではないと思います。
多くの動きのあるページというのは、いくつものイベントが連なって作られています。

複雑な動きというのは、難しいプログラミングからできていると思っている人が多いですが、イベントの一つ一つを見ると単純な動作であることが多いです。
もちろん高度な技術により動作させているものもありますが、大抵の動作は単純なイベントの組み合わせではないでしょうか。

何か一つでもアプリケーションを作成してみると、色んなイベントや、その使い方なども習得できると思います。
何を作ろうかな。。。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed