JS:イベントプロパティ(on~)によるイベント処理【古い記述形式】

JavaSciptのロゴ画像JavaScript
スポンサーリンク

本記事内容は、DOM Level0というJavaScriptでは古い記述例となります。

参考:イベントリスナーを登録するための古い方法 – MDN

現在(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のサイトで確認してください。

GlobalEventHandlers - Web API | MDN
GlobalEventHandlers ミックスインは、 HTMLElement や Document 、 Window といったインターフェイスに共通のイベントハンドラーを示します。

次に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です。イベントを表す変数なので eevt, 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>

スポンサーリンク
JavaScript
スポンサーリンク
dennouをフォローする
電脳産物

コメント