JavaScript unload イベント

概要: このチュートリアルでは、ドキュメントが完全にアンロードされたときに発生するJavaScriptのunloadイベントの使い方を学習します。

正当な理由がない限り、unloadイベントを使用すべきではないことに注意してください。

JavaScript unload イベントの紹介

unloadイベントは、ドキュメントが完全にアンロードされたときに発生します。通常、unloadイベントは、あるページから別のページに移動したときに発生します。

unload イベントは、以下のイベントの後で発生します。

beforeunload イベント
pagehide イベント

この時点で、HTMLドキュメントは次の状態にあります。

UIはユーザーに表示されず、効果がありません。
画像、iframeなど、すべてのリソースはまだ存在します。
エラーはアンロードの流れを停止しません。

実際には、モバイルデバイスでは信頼性が低く、bfcacheに問題を引き起こすため、unloadイベントを使用すべきではありません。

JavaScript unload イベントの処理

unloadイベントを処理するには、addEventListener()メソッドを使用できます。

addEventListener('unload', (event) => {
    console.log('The page is unloaded');
});Code language: JavaScript (javascript)

あるいは、windowオブジェクトのonunloadプロパティにイベントハンドラーを割り当てることもできます。

window.onunload = (event) => {
    console.log('The page is unloaded');
};Code language: JavaScript (javascript)

または、<body>要素のonunload属性にイベントハンドラーを割り当てます。

<!DOCTYPE html>
<html>
<head>
    <title>JS unload Event Demo</title>
</head>
<body onunload="console.log('The page is unloaded')">

</body>
</html>Code language: HTML, XML (xml)

unloadイベントハンドラーを登録するには、addEventListener()を使用することをお勧めします。

まとめ

JavaScriptは、ドキュメントが完全にアンロードされるとunloadイベントを発生させます。
実際には、正当な理由がない限り、unloadイベントを使用しないでください。

このチュートリアルは役に立ちましたか？