JavaScript ページイベント

JavaScriptでは、ページの読み込み（ロード）やページの閉じる前（アンロード）の動作を捉えるための特別なイベントがあります。それがloadイベントとbeforeunloadイベントです。

loadイベント

loadイベントは、ページの全てのコンテンツ（画像、スクリプト、CSS、等）が完全に読み込まれたときに発火します。

このイベントは通常、Windowウオブジェクトまたは特定の要素（画像やスクリプトなど）に対して使用されます。

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

上記のコードは、ページが完全に読み込まれた後にメッセージをコンソールに表示します。

一方、beforeunloadイベントは、ページを閉じる前や別のページに遷移する前に発火します。

このイベントは通常、ユーザーがフォームの入力を終えずにページを離れようとしたときや、作業の保存を促すときなどに使用されます。

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

このコードは、ユーザーがページを離れようとするときにブラウザに警告メッセージを表示します。

警告メッセージのテキストはブラウザによりますが、大体は「このページを離れると未保存の変更は失われます。」といったメッセージが表示されます。