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>
コメント