6.1 イベントオブジェクト
JavaScriptは強力なイベントシステムを提供していて、ユーザーの様々なアクションやブラウザ内で起こる他のイベントを監視できるんだよ。イベントオブジェクトっていうのがあって、それがイベントの情報を保持していて、処理のためのメソッドを提供してるのが重要なポイント。
イベントが発生すると、ブラウザはそのイベントの情報を持ったイベントオブジェクトを作成するんだ。このオブジェクトはイベントハンドラーに引数として渡されるよ。
イベントオブジェクトのプロパティ:
type: イベントのタイプ（例えば、click、keydown）。target: イベントが発生した要素。currentTarget: イベントハンドラーがバインドされた要素。eventPhase: イベントがどのフェーズにあるか（キャプチャ、ターゲット、バブリング）。bubbles: イベントがバブリングするかどうかを示す論理値。cancelable: イベントをキャンセルできるかどうかを示す論理値。defaultPrevented: デフォルトの動作が防がれたかどうかを示す論理値。timeStamp: イベントが作成された時間。isTrusted: イベントがユーザーによって発生されたものかスクリプトによって発生されたものかを示す論理値。
イベントオブジェクトのメソッド:
preventDefault(): イベントに関連付けられたデフォルトの動作をキャンセルする。stopPropagation(): イベントのさらなる伝達を停止する。stopImmediatePropagation(): イベントのさらなる伝達を停止し、現在の要素に対して他のイベントハンドラーの実行を防ぐ。
イベントオブジェクトの使用例:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Event type:', event.type); // 結果: click
console.log('Event target:', event.target); // 結果: <button id="myButton">Click me</button>
console.log('Current target:', event.currentTarget); // 結果: <button id="myButton">Click me</button>
console.log('Event phase:', event.eventPhase); // 結果: 2 (ターゲットフェーズ)
console.log('Bubbles:', event.bubbles); // 結果: true
console.log('Cancelable:', event.cancelable); // 結果: true
console.log('Time stamp:', event.timeStamp); // 結果: 時間（ミリ秒）
console.log('Is trusted:', event.isTrusted); // 結果: true
});
</script>
</body>
</html>
6.2. クリックイベント (Mouse Events)
マウスイベントは、ユーザーがマウスを使って要素とやり取りする時に生成されるんだ:
click: クリックイベントdblclick: ダブルクリックイベントmousedown: マウスボタンを押したイベントmouseup: マウスボタンを離したイベントmousemove: マウスの動きのイベントmouseover: マウスが要素の上に来たイベントmouseout: マウスが要素から離れたイベント
例:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked');
console.log('Event type:', event.type);
console.log('Target element:', event.target);
});
</script>
</body>
</html>
6.3 ロードイベント (Load Events)
ロードイベントは、リソースが読み込みを完了した時に発生するんだ:
load: リソース/ページが完全に読み込まれた時に発生するイベントDOMContentLoaded: 初期のHTML文書がスタイルシート、画像、フレームの完全な読み込みを待たずに読み込まれ解析された時に発生するイベント
例:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Load Events Example</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Window fully loaded');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
});
</script>
</body>
</html>
6.4 フォーカスイベント (Focus Events)
フォーカスイベントは、要素がフォーカスを得たり失ったりする時に生成されるんだ。
focus: 要素がフォーカスを得た時に発生するイベントblur: 要素がフォーカスを失った時に発生するイベント
例:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Input field focused');
});
input.addEventListener('blur', function(event) {
console.log('Input field lost focus');
});
</script>
</body>
</html>
6.5 キーボードイベント (Keyboard Events)
キーボードイベントは、ユーザーがキーボードでキーを押した時に生成されるんだよ:
keydown: キーが押された時に発生するイベントkeyup: キーが離された時に発生するイベントkeypress: キーが押されて離された時に発生するイベント（非推奨）
例:
HTML
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Key down:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Key up:', event.key);
});
</script>
</body>
</html>
GO TO FULL VERSION