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