JS:addEventListenerによるイベント登録

JavaScript

2021.03.02

event_load.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>起動時のイベント</title>
	<script>
		// 起動時のイベント（ホームページが読み込まれた時に実行する処理）
		window.addEventListener("load", function(){
			document.getElementById("message").innerHTML = "ページ読み込みが完了したよ！";
		});
	</script>
</head>
<body>
	<h1>起動時のイベント</h1>
	<p id="message">???</p>
</body>
</html>

events.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>色々なイベント</title>
	<script>
		// 起動時
		window.addEventListener("load", function(){
			alert("ページ読み込みが完了したよ！");
		});
		
		// ウインドウサイズを変更したとき
		window.addEventListener("resize", function(){
			document.getElementById("message").innerHTML = "ウインドウサイズ変えたね！";
		});
		
		// マウスボタンを離したとき
		window.addEventListener("mouseup", function(){
			document.getElementById("message").innerHTML = "マウスアップ！";
		});
		
		// マウスボタンを押したとき
		window.addEventListener("mousedown", function(){
			document.getElementById("message").innerHTML = "マウスダウン！";
		});
		
		// キーボードを押したとき
		window.addEventListener("keydown", function(e){
			document.getElementById("message").innerHTML = e.keyCode + "を押したね！";
		});
		
	</script>
</head>
<body>
	<h1>色々なイベント</h1>
	<p id="message">???</p>
</body>
</html>