JS：イベントプロパティ（on～）によるイベント記述例

JavaScriptのイベントプロパティによるイベント記述例をいくつか示します。

ホームページが読み込まれた時
いろいろなイベント記述
マウスをクリックすると背景色が変わる
入力したキーボード情報を画面に表示していく

ホームページが読み込まれた時

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>起動時のイベント</title>
<script>
	window.onload = function(){
		console.log("起動したよ！");
		document.getElementById("message").innerHTML = "書き換えました";
	};
</script>
</head>
<body>
	<h1>起動時のイベント</h1>
	<p id="message">window.onloadをテストしています。</p>
</body>
</html>

いろいろなイベント記述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JavaScript色々なイベント処理</title>
	<script>
		// サイト表示完了後
		window.onload = function(){
			alert("ページ読み込みが完了したよ！");
		}

		// ウインドウのリサイズ
		window.onresize = function(){
			document.getElementById("message").innerHTML = "ウインドウサイズ変えたね！";
		}

		// マウスボタンを押した時
		window.onmousedown = function(){
			document.getElementById("message").innerHTML = "マウスダウン！";
		}
		
		// マウスボタンを離した時
		window.onmouseup = function(){
			document.getElementById("message").innerHTML = "マウスアップ！";
		}

		// キーボードを押した時
		window.onkeydown = function(e){
			document.getElementById("message").innerHTML = e.keyCode + "を押したね！";
		}
	</script>
</head>
<body>
	<h1>JavaScript色々なイベント処理</h1>
	<p id="message">???</p>
</body>
</html>

マウスをクリックすると背景色が変わる

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JS：マウスを押すと背景色が変わる</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>JS：マウスを押すと背景色が変わる</h1>
	<p>マウスを押してみて！</p>
</body>
</html>

入力したキーボード情報を画面に表示していく

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JS：画面に入力したキー情報を表示していく</title>
	<script>
		var keyString = "";
		window.onkeydown = function(e){
			// 入力キー情報を取得
			var key = e.key;
			// 今までの入力キー情報を連結
			keyString += key;
			// 画面に表示
			document.getElementById("output").innerHTML = keyString;
		}
	</script>
</head>
<body>
	<h1>JS：画面に入力したキー情報を表示していく</h1>
	<p id="output"></p>
</body>
</html>