jQueryでイベント処理

categories: javascript

前回の続きで、今回はイベントをJavaScriptと比較しながらやってみる。クリックしたとかマウスオーバーとかその辺ね。使用するHTML / CSSは次の通り。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="jquery-1.4.4.js"></script>
		<title>jQuery event</title>
	</head>
	<body>
		<h1 class="title">タイトル</h1>
		<p id="text">本文</p>
		<p><a href="http://utbrew.com/" id="link">リンク</a></p>
		<div id="box">
			<p>ボックス</p>
		</div>
	</body>
</html>
@charset "utf-8";

.title {
	color: blue;
}

#box {
	width: 200px;
	height: 200px;
	background-color: gray;
}

イベント処理は、セレクタに対して設定したいイベントのメソッドを呼び出し、引数に実行したいイベント処理(関数)を渡せばOK。例えばid=”button”がクリックされた場合のイベント設定はこんな感じ。

$('#button').click(function () {
	// イベント処理を記述
});

クリック

「タイトル」をクリックすると赤に変わる。

var h1 = $('h1');
h1.click(function () {
	h1.css('color', 'red');
});
var h1 = document.getElementsByTagName('h1')[0];
// IEは未対応
h1.addEventListener('click', function () {
	h1.style.color = 'red';
}, false);

ダブルクリック

「タイトル」をダブルクリックすると緑に変わる。

var h1 = $('h1');
h1.dblclick(function () {
	h1.css('color', 'green');
});
var h1 = document.getElementsByTagName('h1')[0];
// IEは未対応
h1.addEventListener('dblclick', function () {
	h1.style.color = 'green';
}, false);

トグル

id=”box”をクリックする度にシアン、灰色と変わる。

var box = $('#box');
box.toggle(function () {
	box.css('background-color', 'cyan');
}, function () {
	box.css('background-color', 'gray');
});
var box = document.getElementById('box');
// IEは未対応
box.addEventListener('click', function () {
	var bgcolor = document.defaultView.getComputedStyle(box, null).getPropertyCSSValue('background-color').getRGBColorValue();
	var r = bgcolor.red.getFloatValue(1);
	var g = bgcolor.green.getFloatValue(1);
	var b = bgcolor.blue.getFloatValue(1);
	if (r === 128 & g === 128 & b === 128) {
		box.style.backgroundColor = 'cyan';
	} else {
		box.style.backgroundColor = 'gray';
	}
}, false);

マウスオーバー・マウスアウト

「リンク」にマウスが乗ったら赤、離れたら黒にする。

var link = $('#link');
link.mouseover(function () {
	link.css('color', 'red');
});
link.mouseout(function () {
	link.css('color', 'black');
});
var link = $('#link');
link.hover(function () {
	link.css('color', 'red');
}, function () {
	link.css('color', 'black');
});
var link = document.getElementById('link');
// IEは未対応
link.addEventListener('mouseover', function () {
	link.style.color = 'red';
}, false);
link.addEventListener('mouseout', function () {
	link.style.color = 'black';
}, false);

イベント解除

「リンク」にマウスが一回乗ったら赤、離れたら黒にしイベントを解除する。

var link = $('#link');
link.hover(function () {
	link.css('color', 'red');
}, function () {
	link.css('color', 'black');
	// unbind('hover')ではダメ
	link.unbind('mouseover');
	link.unbind('mouseout');
});
var link = document.getElementById('link');
// IEは未対応
link.addEventListener('mouseover', function () {
	link.style.color = 'red';
	link.removeEventListener('mouseover', arguments.callee, false);
}, false);
link.addEventListener('mouseout', function () {
	link.style.color = 'black';
	link.removeEventListener('mouseout', arguments.callee, false);
}, false);

今日はこのぐらいにして、次回はフォーム関連のイベントをやる予定。

tags: ,

Comments

Trackbacks

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です。コメントは承認制です。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

Trackback URL