ここではイベント処理時の注意点について説明します。ここで説明するのは多くのサイトや本で記述されているJavaScriptでのイベントの注意点です。このため、特に目新しいものはありませんので、この項は飛ばして次に読み進めてもらって構いません。
マウスイベントの中にクリックとダブルクリックがあります。以下のサンプルは単にクリックするとメッセージが表示されるものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>click（クリック）イベント</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function check(msg)
{
document.getElementById("mainContents").innerHTML += msg+"<br>";
}
// --></script>
</head>
<body>
<h1>click（クリック）イベント</h1>
<div id="mainContents"
onclick="check('click')"></div>
</body>
</html>
ここにダブルクリックの処理も同時に記述すると先にクリックイベントが2回検知され、その後にダブルクリックが検知されます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>click, dblclickイベント</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function check(msg)
{
document.getElementById("mainContents").innerHTML += msg+"<br>";
}
// --></script>
</head>
<body>
<h1>click, dblclickイベント</h1>
<div id="mainContents"
onclick="check('click')" ondblclick="check('double click')"></div>
</body>
</html>
このようにクリックとダブルクリックのイベントを両方記述すると、ダブルクリックの処理以外にクリックの処理も行われるので注意が必要です。
クリック、ダブルクリック以外に右ボタンがクリックされたことを検知することができます。通常、右クリックが行われるとコンテキストメニューが表示されます。Ajaxでは独自にカスタマイズしたメニューを表示させたい場合もあります。このような場合には以下のようにイベント処理関数からの戻り値をfalseにします。これで通常のメニューは表示されなくなります。（サンプルを実行する。枠内で右クリックした場合のみ有効）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>contextmenuイベント</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function check(msg)
{
document.getElementById("mainContents").innerHTML += msg+"<br>";
return false;
}
// --></script>
</head>
<body>
<h1>contextmenuイベント</h1>
<div id="mainContents"
oncontextmenu="return check('右ボタンがクリックされました')"></div>
</body>
</html>
oncontextmenuはOperaでは動作しないので、この点にだけは注意が必要です。
キー入力に関してはkeydown,keyupイベントとkeypressイベントでは、入力されたキーの値が異なります。（サンプルを
実行する。Internet Explorer, Safari 2, Operaで動作）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>keydown, keypressイベント</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function check(msg)
{
document.getElementById("mainContents").innerHTML += msg+" = "+event.keyCode+"<br>";
}
// --></script>
</head>
<body>
<h1>keydown, keypressイベント</h1>
<form>
<input type="text"
onkeydown="check('keydown')" onkeypress="check('keypress')">
</form>
<div id="mainContents"></div>
</body>
</html>
キーが押され続けた場合も注意が必要です。ブラウザによってイベントの発生が異なるためです。keypressイベントが連続するブラウザもあればkeydownとkeypressが１セットで発生するブラウザもあります。
Ajaxでは入力フォームを利用する機会が多くなることがあります。そのような場合、文字を入力しリターンキーを押すとformタグのactionで指定された送信先へデータを送信してしまいます。ページが切り替わらないのがAjaxの利点の１つですが、何も対策を行わない場合にはCGIにデータが送信され結果が表示されるページに移動してしまいます。これを防ぐには以下のようにformタグのonsubmitにfalseを返します。これによりactionで指定される送信が行われなくなります。その代わりに必要に応じてAjaxで送信処理などを行うようにします。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>submitイベント</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function check()
{
document.getElementById("mainContents").innerHTML += "送信はキャンセルされます<br>";
return false;
}
// --></script>
</head>
<body>
<h1>submitイベント</h1>
<form
onSubmit="return check()">
<input type="text">
<input type="submit" value="送信">
</form>
<div id="mainContents"></div>
</body>
</html>
入力フォームのイベントでセレクトメニュー（selectとoptionタグを利用したメニュー）の項目が選択されたら発生するchangeイベントがあります。注意しないといけないのは「違う項目が選択された時に発生するイベント」である点です。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>changeイベント</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function check()
{
document.getElementById("mainContents").innerHTML += "違う項目が選択されました<br>";
}
// --></script>
</head>
<body>
<h1>changeイベント</h1>
<form>
<select
onChange="check()">
<option>りんご</option>
<option>いちご</option>
<option>すいか</option>
</select>
</form>
<div id="mainContents"></div>
</body>
</html>
もしユーザーが初期状態のままの項目で問題がない場合にはonchageイベントは発生しないことになります。多くのサイトでは、これを防ぐために最初の項目をダミーにしてあります。つまり以下のようにしてユーザーが選択しないといけない状態にしています。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>changeイベント</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function check()
{
document.getElementById("mainContents").innerHTML += "違う項目が選択されました<br>";
}
// --></script>
</head>
<body>
<h1>changeイベント</h1>
<form>
<select onChange="check()">
<option>項目を選択してください</option>
<option>りんご</option>
<option>いちご</option>
<option>すいか</option>
</select>
</form>
<div id="mainContents"></div>
</body>
</html>
もし、このような対策が難しい場合には選択されている項目をselectedIndexなどで調べる必要があります。以下のサンプルはselectedIndexを使って選択されている項目番号を表示します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>changeイベントを使用せずに選択番号を取得</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
function check(selObj)
{
n = document.getElementById(selObj).selectedIndex;
document.getElementById("mainContents").innerHTML += n+"番目の項目が選択されています<br>";
}
// --></script>
</head>
<body>
<h1>changeイベントを使用せずに選択番号を取得</h1>
<form>
<select id="fruits">
<option>りんご</option>
<option>いちご</option>
<option>すいか</option>
</select>
<input type="button" value="チェック" onClick="check('fruits')">
</form>
<div id="mainContents"></div>
</body>
</html>
次項ではドラッグ処理について説明します。
[
第五章 11:ドラッグ処理を行うへ]
[
目次へ]
(2006.1.16)