イベントハンドラはタグの属性部分に指定します。例えば、ボタンをクリックした時に JavaScript を実行する場合は以下のようにします。ブラウザの種類やバージョンによって、各タグで使用可能なイベントハンドラは異なります。
<input type="button" value="OK" onclick="alert('OK!!')">
JavaScript の文法に従い、セミコロン(;)で区切ることにより、複数の文を呼び出すことも可能です。
<input type="button" value="OK" onclick="alert('A'); alert('B')">
イベントハンドラから関数を呼び出すこともできます。関数は通常、<head>～</head> の間で定義します。
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
function kansuu() {
alert("OK!!");
}
</script>
</head>
<body>
<input type="button" value="OK" onclick="kansuu()">
</body>
</html>
<a href="..."> や <input type="submit"> で onclick などのイベントを使用する際、イベントハンドラの戻り値として false を返すことにより、本来の動作(フォームのサブミットやリンク先への移動)を無効化することができます。
<script>
function kakunin() {
if (window.confirm("よろしいですか？")) {
return true; // サブミットする、リンクする
} else {
return false; // サブミットしない、リンクジャンプしない
}
}
</script>
<a href="xxx.htm" onclick="return kakunin()">XXX</a>
<form action="xxx.cgi">
<input type="submit" value="OK" onclick="return kakunin('OK');">
</form>
イベントハンドラを指定するには下記の方法があります。
タグに onxxx="..." 属性を指定します。
<input type="button" value="OK" onclick="alert('Hello!')">
JavaScript でオブジェクトの onxxx 属性に関数を指定します。ひとつのオブジェクトに対してひとつのハンドラのみを設定することができます。他で設定されたハンドラを上書きしないようにするために、onxxx よりも後述の addEventListener() を使用することが多いようです。
<script>
window.onload = function() {
alert("Hello!");
};
document.getElementById("button1").onclick = function() {
alert("Clicked!");
};
</script>
<input type="button" id="button1">
object に対してイベントを設定します。object.onxxxx = "～" ではひとつのイベントハンドラしか設定することができませんが、addEventListener() を用いることで、複数のイベントハンドラを設定することができます。
<script>
window.addEventListener("load", function() {
alert("Hello A");
});
window.addEventListener("load", function() {
alert("Hello B");
});
</script>
addEventListener() で登録したイベントハンドラを削除します。
function keyUpHandler() { ... }
obj.addEventListener("keyup", keyUpHandler);
obj.removeEventListener("keyup", keyUpHandler);
主なイベントについて紹介します。下記で説明されていないイベントの一覧に関しては「JavaScriptイベント一覧」を参照してください。
クリックされた時(onclick)、ダブルクリックされた時(ondblclick)に発生します。Internet Explorer 4.0 以降や Netscape 6 以降では <b> や <img> など大半のタグに指定することができますが、古いブラウザでは、<a>、<area> や、<input> タグによるボタンにのみ指定できます。
<input type="button" value="Click me" onclick="alert('Clicked')">
<input type="button" value="Double click me" ondblclick="alert('Double clicked')">
キーが押された時(onkeydown)、キーがしばらく押された時(onkeypress)、押されたキーが離された時(onkeyup)に発生します。
<input type="text"
onkeypress="document.getElementById('t1').innerHTML += '[Press]'"
onkeydown="document.getElementById('t1').innerHTML += '[Down]'"
onkeyup="document.getElementById('t1').innerHTML += '[Up]'">
<div id="t1">Event: </div>
マウスボタンが押された時(onmousedown)、マウスボタンが離された時(onmouseup)、マウスカーソルがそのオブジェクトの上に乗った時(onmouseover)、マウスカーソルがそのオブジェクトの上から離れた時(onmouseout)、マウスカーソルが移動した時(onmousemove)に発生します。
<input type="button"
value="Hover your mouse."
onmousedown="document.getElementById('t2').innerHTML += '[Down]'"
onmouseup="document.getElementById('t2').innerHTML += '[Up]'"
onmouseover="document.getElementById('t2').innerHTML += '[Over]'"
onmouseout="document.getElementById('t2').innerHTML += '[Out]'"
onmousemove="document.getElementById('t2').innerHTML += '[Move]'"
>
<div id="t2">Event: </div>
onload はページが読込まれた時に発生します。ページが読み込まれた時の処理を複数指定するには addEventListener() を用います。
<script>
window.onload = function() { alert("Hello!"); };
</script>
onbeforeunload はページから離れる前に発生します。下記の様に文字列を返却すると、ページ離脱時に警告ダイアログが表示されるようになります。Internet Explorer や Edge では、返却した文字列がダイアログに表示されます。
<script>
window.onbeforeunload = function() { return "本当にこのページから離れますか？"; };
</script>
onunload では alert() を出すなどの操作は禁止されているので、便利な使用方法はあまりないかもしれません。
<script>
window.onunload = function() { ... };
</script>
その部品がクリックされるなどして、選択された状態になることを「フォーカスがあたる」といいます。これらのイベントは、フォーカスを得た時(onfocus)、フォーカスを失った時(onblur)に発生します。
<input type="text" name="text1">
<input type="text" name="text2"
onfocus="document.getElementById('t3').innerHTML += '[Focus]'"
onblur="document.getElementById('t3').innerHTML += '[Blur]'">
<input type="text" name="text3">
<div id="t3">Event: </div>
フォームがサブミットされた時(onsubmit)、フォームがリセットされた時(onreset)に発生します。onsubmit="..."、onreset="..." の戻り値として false を返すことにより、サブミットボタン、リセットボタンの本来の動作を無効化することができます。
<script>
function doSubmit(form) {
if (window.confirm("送信してよろしいですか？")) {
return true;
} else {
return false;
}
}
</script>
<form method="POST" action="sample.cgi" onsubmit="return doSubmit(this)">
<input type="text" name="word" value="abc...">
<input type="submit" value="OK">
</form>
フォーム部品の内容が変更された時に発生します。テキストボックスの場合は、内容が変更されて別の部品にフォーカスが移動した際に発生します。ononput も参照してください。
<script>
function doChange() {
document.getElementById('t4').innerHTML += "[Change]";
}
</script>
<input type="checkbox" name="check1" onchange="doChange()">
<input type="text" name="text1" onchange="doChange()">
<select onchange="doChange()">
<option>AAA</option>
<option>BBB</option>
</select>
<div id="t4">Event: </div>
テキストボックスなどに入力された時(oninput)発生します。onchange と異なり、テキストボックスでも文字が入力される度に発生します。
<script>
function doInput() {
document.getElementById('t5').innerHTML += "[Input]";
}
</script>
<input type="text" name="text1" oninput="doInput()">
<div id="t5">Event: </div>
ウィンドウがリサイズされた時(onresize)に発生します。
window.onresize = function() { console.log("[Resize]"); };
ウィンドウや、スクロールバー付きの要素がスクロールされた時(onscroll)に発生します。
window.onscroll = function() { console.log("[Scroll]"); };
ウィンドウの位置が移動した時(onmove)に発生します。Netscape Navigator 4.0 でサポートされていたもので、現在の主要ブラウザではサポートされていません
window.onmove = function() { console.log("[Move]"); };
ページや画像などの読込みが中断された時(onabort)に発生します。
window.onabort = function() { console.log("[Abort]"); };
読込みが失敗した時に発生します。<body>、<img> などに指定します。
document.getElementById("img1").onerror = function() {
alert("Load error!");
};
テキストが選択された時に発生します。
<script>
window.onselect = function() {
alert("Selected");
};
</script>
<textarea>Select this text.</textarea>