pagehide ( onpagehide )イベント
pagehide ( onpagehide )イベントは、Webページを移動するやブラウザを閉じるなどWebページが遷移すると発生するイベントです。pagehideイベントはページをキャッシュします。
ページを遷移させる方法には、例えば、リンクをクリックする、ページを更新する、フォームを送信する、ブラウザウィンドウを閉じるなどがあります。
document.body.addEventListener( "pagehide", ()=>{
console.log( event );
}, false );
詳しくは Example を参照してください
pagehide イベントは pageshow イベントの対です。
詳しくは以下のpagehide ( onpagehide )イベントについて
を参照してください。
pagehide ( onpagehide )イベントについて
pagehide ( onpagehide )イベントはページを遷移すると発生するイベントです。
似たイベントに unload イベントがあります。pagehide イベントはページをキャッシュしますが、onunload イベントはページをキャッシュしません。
ページがキャッシュか/否かは、PageTransitionEvent.persisted プロパティで確認できます。persisted プロパティはキャッシュの有無を Bool 値で返します。キャッシュされている場合は true。キャッシュではない場合は false を返します。
unload イベントに比べて、適応されるエレメントに違いがあります。 pagehide イベントは Window、<body> エレメントで使うことができますが、unload イベントは Window、Document、各エレメントで使うことができます。
構文（Syntax）
in HTML
<tagelement onpagehide="function()">
in JavaScript
object.onpagehide = function(){ };
object.addEventListener("pagehide", script_);
備考（Remarks）
| Bubbles | No |
| Cancelable | No |
| Interface | WindowEventHandlersミックスイン |
| Supported HTML Elements | Window、<body> |
WindowEventHandlers ミックスインで定義されおり、Window インターフェイス、HTMLBodyElement インターフェイスで利用できます。
Example
反応はあるのですが、ページ自体がキャッシュのためか上手く動きません。参考程度にしてください。
関連イベント
ページの遷移に関するイベント
HTML テキストのロード、ページの表示、閉じる、移動するといったページの遷移に関するイベントです。
| onload | ファイルやエレメントのロード時に発生。window でページの初期設定に使用 |
| onpagehide | ページが遷移したら。キャッシュされます |
| onpageshow | ページが読み込まれたら。キャッシュの有無に関係なくイベントが発生 |
| onunload | ページが遷移したら。キャッシュされません |