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