event_load.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!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> |
コメント