Index

イベントハンドラ

　JavaScript の実用的なTips集です。ここでは、イベントとイベントハンドラを扱います。イベントはユーザー操作等により、ブラウザやページ、またはその要素の状態が変化した時に発生します。イベントハンドラは、発生したイベントに対応するコードを結び付けるための機能です。'on' + イベント名が、イベントハンドラの名称となります。JavaScript で扱えるイベントとイベントハンドラは以下の通りとなります。

index
種類	イベント名	イベントハンドラ	発生するタイミング
ページのイベント	load	onload	ページが読み込まれた時
	unload	onunload	ページが閉じられる時
	resize	onresize	ページのサイズが変更された時
	abort	onabort	ページの読み込みが中止された時
	error	onerror	エラーが発生した時
マウス・イベント	mouseover	onmouseover	ある領域上にマウス・カーソルが移動された時
	mouseout	onmouseout	ある領域上からマウス・カーソルが移動された時
	mousedown	onmousedown	マウス・ボタンが押された時
	mouseup	onmouseup	マウス・ボタンが解放された時
	mousemove	onmousemove	マウス・カーソルが移動された時
	click	onclick	マウスがクリックされた時
	dblclick	ondblclick	マウスがダブルクリックされた時
キー・イベント	keydown	onkeydown	キーボードのキーが押された時
	keypress	onkeypress	キーボードのキーが押されている時
	keyup	onkeyup	キーボードのキーが解放された時
選択イベント	focus	onfocus	ある領域が選択された時
	blur	onblur	ある領域の選択が解除された時
	select	onselect	入力領域の文字列が選択された時
変更イベント	change	onchange	フォームの値が変更された時
命令イベント	submit	onsubmit	submit（送信）命令が出された時
命令イベント	reset	onreset	reset（初期化）命令が出された時

sasaraan programming

Exposition

■ページのイベント

　onload は、ページがブラウザにロードされた時の、onunload は、ページが閉じられる時の処理を行いたい時に使用します。これらは、通常は body タグに対して使用します。
　onresize は、ウィンドウのサイズ変更時の処理に使用します。これも body タグに対して使用します。ブラウザによってはページ読込時に発生するとは限りませんので注意が必要です。
　また、onabort は読込を中止する際、onerror はエラーが発生した際の処理に使用します。これらは、通常は body または img タグに使用します。

// JavaScriptソース

// ウィンドウサイズを取得して表示
function GetWndSize() {
    var nIE = navigator.userAgent.indexOf("MSIE");
    var bIE6std = nIE >= 0 && navigator.userAgent.substr(nIE+5, 1) == "6" 
                && document.compatMode && document.compatMode=="CSS1Compat";
    var nWidth, nHeight;
    if (bIE6std) {                   /* IE6スタンダードモードの時 */
        nWidth = document.documentElement.clientWidth;
        nHeight = document.documentElement.clientHeight;
    } else if (nIE >= 0) {         /* IEの時 */
        nWidth = document.body.clientWidth;
        nHeight = document.body.clientHeight;
    } else {                          /* IE以外のとき */
        nWidth = window.innerWidth;
        nHeight = window.innerHeight;
    }
    document.Form1.Text1a.value = nWidth;
    document.Form1.Text1b.value = nHeight;
}

<!-- HTMLソース -->

<body onload="GetWndSize()" onresize="GetWndSize()">
    ...
    <form name="Form1" style="margin:1ex;">Window Size : 
        WIDTH =<input type="text" name="Text1a" size="10"/>
        HEIGHT =<input type="text" name="Text1b" size="10"/>
    </form>
    ...
</body>

■マウス・イベント

　マウス・イベントハンドラの代表的なものに onclick と ondblclick があります。ただし、同時に設定すると、dblclick を検知しないことがありますので注意が必要です。
　onmouseover, onmouseout は、マウスがオブジェクト上に乗った時、あるいは離れた時のイベントハンドラで、イメージのロールオーバー効果などに良く使われる手法です。
　他にも、マウス・ボタンを押した時の onmousedown、マウス・ボタンを離した時の onmouseup、マウス・カーソルを動かした時の onmousemove があり、こちらは、主にユーザー操作によるオブジェクトの移動などに利用されます。

// JavaScriptソース(Headタグ内)

// 画像のプリロードはHEADタグ内で行う必要があります
var mTag1 = new Image();
var mTag2 = new Image();
mTag1.src = "jssamp/tag_js_1.gif";    // 画像のプリロード（マウスアウト時）
mTag2.src = "jssamp/tag_js_2.gif";    // 画像のプリロード（マウスオーバー時）

// マウスホーバー
function Image_Hovered(flag) {
    if (flag) {
        document.Image2.src = mTag2.src;
    } else {
        document.Image2.src = mTag1.src;
    }
}

// クリックイベント
function Image_Clicked() {
    alert("Clicked !");
}

<!-- HTMLソース -->

<img name='Image2' src='jssamp/tag_js_1.gif'  onclick='Image_Clicked()' 
        onmouseover='Image_Hovered(true)' onmouseout='Image_Hovered(false)' />

■キー・イベント

　ユーザーがキーボードのキーを押すと、まず keydown イベントが発生（イベントハンドラ : onkeydown）します。続いて keypress イベントが発生（イベントハンドラ : onkeypress）し、キーを離すと keyup イベントが発生（イベントハンドラ : onkeyup）します。

// JavaScriptソース

// 合計を算出して表示
function GetValue() {
    var num_a = document.Form3.Text3a.value;
    var num_b = document.Form3.Text3b.value;
    var num_c = "Error";
    if (!isNaN(num_a) && !isNaN(num_b)) {                      /* 数値かどうか確認 */
        num_c = parseFloat(num_a) + parseFloat(num_b);  /* 数値に変換して計算 */
    }
    document.Form3.Text3c.value = num_c;
}

<!-- HTMLソース -->

<form name="Form3" style="margin:1ex">
    <input type="text" name="Text3a" size="16" value="0" style="text-align:right" 
            onkeyup="GetValue()"> + 
    <input type="text" name="Text3b" size="16" value="0" style="text-align:right" 
            onkeyup="GetValue()"> = 
    <input type="text" name="Text3c" size="16" value="0" style="text-align:right">
</form>

■選択イベント

　あるオブジェクトが選択状態になった時のイベントには、focus と blur があります。これらのイベントハンドラは onfocus, onbｌur となります。また、オブジェクトがテキスト（text, textarea）の場合は、入力領域の文字列の全部または一部が選択状態になった時に select イベントが発生し、こちらのイベントハンドラは、onselect となります。

// JavaScriptソース

// 説明文を表示する
function SetExplain(index) {
    var str = "";
    if (index == 1) {
        str = "セットを選択してください";
    } else if (index == 2) {
        str = "色を選択してください";
    } else if (index == 3) {
        str = "数量を入力してください";
    }
    document.Form4.Text4b.value = str;	
}

// 説明文をクリアする
function ClearExplain() {
    document.Form4.Text4b.value = "";
}

<!-- HTMLソース -->

<form name="Form4" style="margin:1ex">セット名 : 
    <select name="Select4a" onfocus="SetExplain(1)" onblur="ClearExplain()">
        <option value="A">Aセット
        <option value="B">Bセット
        <option value="C">Cセット
    </select>　色の選択 : 
    <select name="Select4b" onfocus="SetExplain(2)" onblur="ClearExplain()">
        <option value="red">赤
        <option value="green">緑
        <option value="blue">青
    </select>　数量 : 
    <input type="text" name="Text4a"  size="6" 
            onfocus="SetExplain(3)" onblur="ClearExplain()"/>　説明 : 
    <input type="text" name="Text4b"  size="24"/>
</form>

■変更イベント

　フォームの値が変更されると change イベントが発生します。ただし、テキストオブジェクトでは、値が変更された後、フォーカスが解除された段階で発生します。onchange イベントハンドラでは、値の変更に伴う処理を行います。

// JavaScriptソース

// 合計金額を算出して表示
function GetSum() {
    var nPrice = document.Form5.Select5.options[document.Form5.Select5.selectedIndex].value;
    var nCount = document.Form5.Text5a.value;
    var nSum = 0;
    if (!isNaN(nCount)) {
        nSum = parseInt(nPrice) * parseInt(nCount);
    }
    document.Form5.Text5b.value = nSum;
}

<!-- HTMLソース -->

<form name="Form5" style="margin:1ex">
    <select name="Select5" onchange="GetSum()">
        <option value="2000">Aセット(\\2000)
        <option value="3000">Bセット(\\3000)
        <option value="5000">Cセット(\\5000)
    </select> x 
    <input type="text" name="Text5a" size="8" value="0" style="text-align:right" 
            onchange="GetSum()"> 個 = 
    <input type="text" name="Text5b" size="16" value="0" style="text-align:right"> 円　
    <input type="reset" value="リセット">
</form>

■命令イベント

　onsubmit, onreset はいずれもブラウザに特定の処理をするよう命令を出すもので、onsubmit は送信（指定した場所へデータを送信する）、onreset は初期化（フォーム要素を初期値に戻す）を扱います。いずれも、操作部分（ボタン）ではなく form タグに使用します。
　なお、これらに "return false" を指定すると、命令を中止させることができます。この時、通常は関数を利用しますが、イベントハンドラの記述には "onreset=return 関数名" のように、return を記述する必要があります。

// JavaScriptソース

// 文字列のセット
function SetString() {
    document.Form6.Text6.value = "リセットボタンのテストです。";
}

//  リセットの確認
function AllowReset() {
    return confirm("内容をクリアします。よろしいですか？");
}

document.write("<form name='Form6' onreset='return AllowReset()'>");
document.write("<input type='text' name='Text6' size='50' value=''>　");
document.write("<input type='reset' value='リセット'>");
document.write("<\/form>");
SetString();        // 文字列をセット