beforeunloadイベント

beforeunload イベント

 【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【beforeunloadイベントとは】
→HTML ページが現在のページから他のページへ遷移する直前に発生するイベントです。

遷移前のため、確認ダイアログを表示してページの遷移をキャンセルすることができます。

onbeforeunload プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として beforeunload を指定してイベントリスナーを登録できます。

【beforeunloadイベントの使い方】
beforeunload イベントは HTML ページが現在のページから他のページへ遷移する直前に発生するイベントです。


【window.onbeforeunload プロパティにイベントハンドラを登録した場合】
プロパティを使用する場合は、イベントハンドラに無名関数またはアロー関数式を使って記述することもできます。

Event オブジェクトの preventDefault メソッドはブラウザのデフォルトの処理(例えばリンクをクリックしたらそのリンク先へページが遷移するなど)をキャンセルするためのメソッドです。

 Event オブジェクトの returnValue プロパティに何らかの値を設定することで確認ダイアログが表示されます。

【イベントリスナーを登録する場合】
addEventListener メソッドの最初の引数に'beforeunload' を指定する。


サンプルコード

ブラウザを立ち上げる

リンクをクリックする

「このページを離れる」ボタンをクリックする

【DOMContentLoadedイベントとloadイベントの違い】

HTML ページのダウンロードが完了したあと、 HTML を解析して DOM ツリーを作成します。この時点で DOMContentLoaded イベントが発生しますが、この時点はまだページに含まれる画像やスタイルシートの読み込みが完了しているかどうかは分かりません。
画像などのすべてのリソースの読み込みが完了すると load イベントが発生します。

サンプルコード



ブラウザを立ち上げる

以上