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);
今日はこのぐらいにして、次回はフォーム関連のイベントをやる予定。
2011/01/21 19:33 | 1 Comment
Comments
Trackbacks
[…] 前回からちょっと時間があいたけど、今日はフォーム関係のイベントをやってみる。ベースのHTMLはこんな感じ。 […]
Trackback URL