本記事内容は、DOM Level0というJavaScriptでは古い記述例となります。
現在（2020年3月現在）のDOM Level2ではイベントリスナー（addEventListener）でのイベント登録が推奨される記述となります。IE8等古いブラウザで利用するなどの特殊例を除けば今後はaddEventListenerによる記述をおすすめします。
JavaScriptのイベントプロパティ（onclick, onload… 頭にonがつく名称のイベント）によるイベント記述例や使い方の例を示します。
正式にはoneventハンドラーの登録という方法についての簡単な利用例を示します。
ホームページが読み込まれた時
ブラウザでホームページが表示される際、onloadというイベントが発生します。
onloadイベントは、HTMLファイルで言えば</html>までの読み込みが完了した時点で発生するイベントです。
アプリケーションで言うなら起動時のイベントと言ってもいいかもしれません。
以下サンプルではホームページが表示された際、アラートを表示します。
onload.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>イベント処理基本</title>
<script>
window.onload = function(){
alert("ページ読み込みが完了したよ！");
}
</script>
</head>
<body>
<h1>イベント処理基本</h1>
</body>
</html>
解説
上記例では無名関数（関数名をもたない関数）による記述です。
HTMLの読み込みが完了するとalert関数によりポップアップメッセージが表示されます。
window.onload = function(){
// 無名関数処理部分
alert("ページ読み込みが完了したよ！");
}
windowの後にピリオドでイベント名をつなげます。
ちなみにwindowというのは、JavaScriptではグローバルオブジェクトと言ってどこからでも参照できる変数です。現在表示されているホームページのウインドウを表していると考えてください。
現在のページに対してイベントを設定している為、
window.onload
などとなるわけです。
イベントの種類は多数存在するため、イベント名称や使い方については以下MDNのサイトで確認してください。
次にonload以外のイベントについても見ていきます。
いろいろなイベント記述
onevents.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>色々なイベント</title>
<script>
window.onload = function(){
alert("ページ読み込みが完了したよ！");
}
window.onresize = function(){
document.getElementById("message").innerHTML = "ウインドウサイズ変えたね！";
}
window.onmouseup = function(){
document.getElementById("message").innerHTML = "マウスアップ！";
}
window.onmousedown = function(){
document.getElementById("message").innerHTML = "マウスダウン！";
}
window.onkeydown = function(e){
document.getElementById("message").innerHTML = e.keyCode + "を押したね！";
}
</script>
</head>
<body>
<h1>色々なイベント</h1>
<p id="message">???</p>
</body>
</html>
上記プログラムではwindowに対して、5つのイベントプロパティを設定しています。
| イベント | イベントプロパティ名 |
|---|---|
| ページ読み込み完了（起動時） | onload |
| ウインドウのリサイズ | onresize |
| マウスアップ（離したとき） | onmouseup |
| マウスダウン（押したとき） | onmousedown |
| キーボードを押した時 | onkeydown |
ウインドウのリサイズに関しては、実際にブラウザのウインドウサイズを変更して確認してください。（スマホやタブレットであれば端末を傾ける事でリサイズイベントが発生します）
マウスイベントで注意して欲しいのは、マウスボタンを押し込んだ状態がonmousedownである事です。マウスボタンを押し込んだ状態からボタンを離すとonmouseupイベントが発生します。これはキーボードイベントについても同様です。今回利用していませんが、onkeyupなども存在します。
イベントの種類によっては関数にイベント引数を設定（function(e){…}の部分）することでイベントに伴う情報を得る事が出来ます。
例えばonkeydownイベントの引数に設定した変数を通して、押したキーの種類を得ることもできます。（e.keyCodeの部分）
window.onkeydown = function(e){
document.getElementById("message").innerHTML = e.keyCode + "を押したね！";
}
上記例では、変数名を e としていますが、実際には変数名は何でもOKです。イベントを表す変数なので e や evt, event などとすることが多いようです。
こんな感じでもOK
window.onkeydown = function(event){
document.getElementById("message").innerHTML = event.keyCode + "を押したね！";
}
マウスをクリックすると背景色が変わる
onmouse_up_down.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>課題_マウスを押すと背景色が変わる</title>
<script>
// マウスを押したとき
window.onmousedown = function(){
document.getElementById("bd").style.backgroundColor = "#ccff00";
}
// マウスを離したとき
window.onmouseup = function(){
document.getElementById("bd").style.backgroundColor = "#ffffff";
}
</script>
</head>
<body id="bd">
<h1>課題_マウスを押すと背景色が変わる</h1>
<p>マウスを押してみて！</p>
</body>
</html>
解説
bodyタグにid名bdを設定しています。
<body id="bd">
bodyタグ自体は表示されているホームページ全体を表すため、bdで指定されたDOMに対して背景色を設定すれば、背景色を変更したことになります。
上記サンプルでは、マウスボタンを離した時（onmouseup）とマウスボタンを押した時（onmousedown）に背景色変更の処理を記述しています。
window.onmouseup = function(){
document.getElementById("message").innerHTML = "マウスアップ！";
}
window.onmousedown = function(){
document.getElementById("message").innerHTML = "マウスダウン！";
}
ホームページの元の背景色が白ですので、マウスボタンを離したときのイベント（onmouseup）に背景色を白にする処理を記述すれば、マウスボタンを押した状態で背景色が変わり、マウスボタンを離すと元の白色に背景色が戻るという処理を記述できることになります。
あたかもそういう風に見えるという事がプログラミングだと思います。
入力したキーボード情報を画面に表示していく
onkeydown.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>画面に入力したキー情報を表示していく</title>
<script>
var keyString = "";
window.onkeydown = function(e){
// 入力キー情報を取得
var key = e.key;
if(key === "Control") console.log("コントロールキーが押されました");
// 今までの入力キー情報を連結
keyString += key;
// 画面に表示
document.getElementById("out").innerHTML = keyString;
}
</script>
</head>
<body>
<h1>画面に入力したキー情報を表示していく</h1>
<p id="out"></p>
</body>
</html>
コメント