JS:イベントプロパティ(on~)によるイベント記述例

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

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>
スポンサーリンク
JavaScript
スポンサーリンク
dennouをフォローする
電脳産物

コメント