DOM

：

：

Window：popstate イベント

　編集：2022.10.27 by T.A.

[Edge]。→、、

ユーザーがセッション履歴を操作している間にアクティブな履歴項目が変更されたときに発行されます。

これは現在の履歴項目をユーザーが最後に訪れたページのものに変更するか、または history.pushState() が履歴項目を履歴スタックに追加するために使用されていた場合、その履歴項目が代わりに使用されます。

バブリング なし
キャンセル可能 いいえ
インターフェイス PopStateEvent
イベント ハンドラー プロパティ onpopstate

¶省く

例
mdnより
window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // "location: http://example.com/example.html?page=1, state: {"page":1}" と出力
history.back(); // "location: http://example.com/example.html, state: null" と出力
history.go(2);  // "location: http://example.com/example.html?page=3, state: {"page":3}" と出力

HTML： 

<A id="Aアンカー1">A要素。アンカー1</A><BR>
<A id="Aアンカー2">A要素。アンカー2</A><BR>

JavaScript： これを実行したら、履歴を戻したり、進めたりしてみてください。 

function Job(eve){
  D=eve;
  DA=eve.state;
  alert("popstate イベントが発生しました");
  if(eve.state==null){
    alert("state データは null です");
  }else{
    alert("state データが得られました");
  }
}
window.onpopstate=Job;
history.pushState({test:10}, '', "#Aアンカー1");
history.pushState({test:20, testP2:'あいう'}, '', "#Aアンカー2");

ページを戻して得られた内容：D（eve） 

＝[object]：[object PopStateEvent]
isTrusted＝[boolean]：true
state＝[object]：[object Object]
type＝[string]：popstate
target＝[object]：[object Window]
currentTarget＝[object]：[object Window]
eventPhase＝[number]：0
bubbles＝[boolean]：false
cancelable＝[boolean]：false
defaultPrevented＝[boolean]：false
composed＝[boolean]：false
…

同じく：DA（eve.state） 

＝[object]：[object Object]
test＝[number]：10

history.pushState(null, '') の履歴でも、また popstate イベントを割り当てていると popstate イベントは発生しました。

→PopStateEvent.state。

テスト