JavaScript - Window/Document Events

こんにちは、未来のコーダーさんたち！今日は、JavaScriptのイベントの興味深い世界に飛び込み、特にWindowとDocumentのイベントに焦点を当ててみます。あなたの近所の親切なコンピュータ先生として、私は多くの例と説明を交えてこの旅を案内します。お気に入りの飲み物を手に取り、リラックスして、始めましょう！

Window Events

Windowイベントは、ブラウザのウィンドウに関連するアクションです。これらのイベントは、動的で反応的なウェブアプリケーションを作成するのに非常に役立ちます。以下に、最も一般的なWindowイベントを探ってみましょう。

1. load

loadイベントは、ページ全体（スタイルシートや画像などの依存リソースを含む）が完全に読み込まれたときに発生します。これは、スクリプトを実行する前にすべての要素が利用可能であることを確認するためによく使われます。

window.addEventListener('load', function() {
console.log("ページは完全に読み込まれました！");
});

この例では、ウィンドウオブジェクトにイベントリスナーを追加しています。'load'イベントが発生すると、私たちの関数が実行され、コンソールにメッセージが記録されます。

2. resize

resizeイベントは、ブラウザのウィンドウがリサイズされたときに発生します。これは、レイアウトの調整や寸法の再計算に非常に役立ちます。

window.addEventListener('resize', function() {
console.log("ウィンドウがリサイズされました: " + window.innerWidth + "x" + window.innerHeight);
});

ここでは、ウィンドウがリサイズされるたびに、新しい寸法を記録しています。これは、レスポンシブデザインの調整に役立ちます。

3. scroll

scrollイベントは、ユーザーがウィンドウ内でスクロールしたときに発生します。これは、無限スクロールを実装するか、スクロール位置に基づいて要素を表示/非表示にするために使えます。

window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
console.log("スクロール位置: " + scrollPosition);

if (scrollPosition > 300) {
document.getElementById('backToTop').style.display = 'block';
} else {
document.getElementById('backToTop').style.display = 'none';
}
});

この例では、ユーザーが300ピクセル以上スクロールしたときに「トップに戻る」ボタンを表示しています。

4. unload

unloadイベントは、ユーザーがページから移動する際に発生します。これは、クリーンアップタスクやページを離れる前にユーザーに確認を促すために使えます。

window.addEventListener('unload', function(event) {
event.preventDefault();
event.returnValue = '';
});

このコードは、ユーザーがページを離れるときに確認ダイアログを表示します。ただし、これを控えめに使うことをお勧めします。ユーザーには迷惑 becomes!

Document Events

Documentイベントは、HTMLドキュメント自体に関連しています。これらのイベントにより、ページのコンテンツとさまざまな方法でやりとりすることができます。以下に、主要なDocumentイベントを見てみましょう。

1. DOMContentLoaded

DOMContentLoadedイベントは、初期のHTMLドキュメントが完全に読み込まれ、解析されたときに発生します。外部リソースの読み込みが完了するのを待たずに発生します。

document.addEventListener('DOMContentLoaded', function() {
console.log("DOMが準備ができました！");
document.getElementById('myButton').addEventListener('click', function() {
alert("ボタンがクリックされました！");
});
});

このイベントは、window.loadよりも優れている理由は、画像や他のリソースの読み込みを待たずにスクリプトを実行できるからです。

2. click

clickイベントは、要素がクリックされたときに発生します。これは最も一般的なイベントの1つです。

document.getElementById('myButton').addEventListener('click', function(event) {
console.log("ボタンがクリックされました: 座標 " + event.clientX + ", " + event.clientY);
event.target.style.backgroundColor = 'red';
});

この例では、クリック位置を記録し、ボタンの色を変更しています。

3. keydown and keyup

これらのイベントは、キーが押された(keydown)または解放された(keyup)ときに発生します。

document.addEventListener('keydown', function(event) {
console.log("キーが押されました: " + event.key);
if (event.key === 'Enter') {
document.getElementById('submitButton').click();
}
});

このコードは、すべてのキー押下を記録し、Enterキーが押されたときに送信ボタンをクリックします。

4. mouseover and mouseout

これらのイベントは、マウス-pointerが要素に入った(mouseover)または出た(mouseout)ときに発生します。

let hoverElement = document.getElementById('hoverMe');

hoverElement.addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});

hoverElement.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});

これは、マウスが要素の上にいるときに背景色を変更するシンプルなホバーエフェクトを作成します。

Event Methods Table

以下に、今まで話ししたメソッドをまとめた表があります：

イベント	説明	例
load	ページが完全に読み込まれたときに発生	window.addEventListener('load', function() {...})
resize	ウィンドウがリサイズされたときに発生	window.addEventListener('resize', function() {...})
scroll	ウィンドウがスクロールされたときに発生	window.addEventListener('scroll', function() {...})
unload	ページから移動するときに発生	window.addEventListener('unload', function(event) {...})
DOMContentLoaded	DOMが準備ができたときに発生	document.addEventListener('DOMContentLoaded', function() {...})
click	要素がクリックされたときに発生	element.addEventListener('click', function(event) {...})
keydown	キーが押されたときに発生	document.addEventListener('keydown', function(event) {...})
keyup	キーが解放されたときに発生	document.addEventListener('keyup', function(event) {...})
mouseover	マウス-pointerが要素に入ったときに発生	element.addEventListener('mouseover', function() {...})
mouseout	マウス-pointerが要素から出たときに発生	element.addEventListener('mouseout', function() {...})

それでは、皆さん！JavaScriptのWindowとDocumentイベントの基本をカバーしました。実践で完璧にするために、これらのイベントを自分のプロジェクトで実験してみてください。間もなく、あなたもプロのようにインタラクティブで動的なウェブページを作成できるようになるでしょう！

ハッピーコーディング、そしてあなたのイベントが常に期待通りに発火するように！

Credits: Image by storyset