Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("popstate", (event) => { })onpopstate = (event) => { }

APopStateEvent. Inherits fromEvent.

PopStateEvent.stateRead only

Returns a copy of the information that was provided topushState() orreplaceState().

In addition to theWindow interface, the event handler propertyonpopstate is also available on the following elements:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

If the history entry being activated was created by a call tohistory.pushState() or was affected by a call tohistory.replaceState(), thepopstate event'sstate property contains a copy of the history entry's state object.

These methods and their corresponding events can be used to add data to the history stack which can be used to reconstruct a dynamically generated page, or to otherwise alter the state of the content being presented while remaining on the sameDocument.

Note that just callinghistory.pushState() orhistory.replaceState() won't trigger apopstate event. Thepopstate event will be triggered by doing a browser action such as a click on the back or forward button (or callinghistory.back() orhistory.forward() in JavaScript).

Browsers tend to handle thepopstate event differently on page load. Chrome (prior to v34) and Safari always emit apopstate event on page load, but Firefox doesn't.

It's important to first understand that — to combat unwanted pop-ups — browsers may not fire thepopstate event at all unless the page has been interacted with.

This section describes the steps that browsers follow in the cases where theydo potentially fire thepopstate event (that is, in the cases where the page has been interacted with).

When a navigation occurs — either due to the user triggering the browser'sBack button or otherwise — thepopstate event is near the end of the process to navigate to the new location. It happens after the new location has loaded (if needed), displayed, made visible, and so on — after thepageshow event is sent, but before the persisted user state information is restored and thehashchange event is sent.

To better understand when thepopstate event is fired, consider this simplified sequence of events that occurs when the current history entry changes due to either the user navigating the site or the history being traversed programmatically. Here, the transition is changing the current history entry to one we'll refer to asnew-entry. The current page's session history stack entry will be referred to ascurrent-entry.

1. Ifnew-entry doesn't currently contain an existingDocument, fetch the content and create itsDocument before continuing. This will eventually send events such asDOMContentLoaded andload to theWindow containing the document, but the steps below will continue to execute in the meantime.
2. Ifcurrent-entry's title wasn't set using one of the History API methods (pushState() orreplaceState()), set the entry's title to the string returned by itsdocument.title attribute.
3. If the browser has state information it wishes to store with thecurrent-entry before navigating away from it, it then does so. The entry is now said to have "persisted user state." This information the browser might add to the history session entry may include, for instance, the document's scroll position, the values of form inputs, and other such data.
4. Ifnew-entry has a differentDocument object thancurrent-entry, the browsing context is updated so that itsdocument property refers to the document referred to bynew-entry, and the context's name is updated to match the context name of the now-current document.
5. Each form control withinnew-entry'sDocument that hasautocomplete configured with its autofill field name set tooff is reset. SeeThe HTML autocomplete attribute for more about the autocomplete field names and how autocomplete works.
6. Ifnew-entry's document is already fully loaded and ready—that is, itsreadyState iscomplete—and the document is not already visible, it's made visible and thepageshow event is fired at the document with thePageTransitionEvent'spersisted attribute set totrue.
7. The document'sURL is set to that ofnew-entry.
8. If the history traversal is being performed with replacement enabled, the entry immediately prior to the destination entry (taking into account thedelta parameter on methods such asgo()) is removed from the history stack.
9. If thenew-entry doesn't have persisted user state and its URL's fragment is non-null, the document is scrolled to that fragment.
10. Next,current-entry is set tonew-entry. The destination entry is now considered to be current.
11. Ifnew-entry has serialized state information saved with it, that information is deserialized intoHistory.state; otherwise,state isnull.
12. If the value ofstate changed, thepopstate event is sent to the document.
13. Any persisted user state is restored, if the browser chooses to do so.
14. If the original and new entries shared the same document, but had different fragments in their URLs, send thehashchange event to the window.

As you can see, thepopstate event is nearly the last thing done in the process of navigating pages in this way.

A page athttp://example.com/example.html running the following code will generate logs as indicated:

window.addEventListener("popstate", (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(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"history.back(); // Logs "location: http://example.com/example.html, state: null"history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}"

The same example using theonpopstate event handler property:

window.onpopstate = (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(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"history.back(); // Logs "location: http://example.com/example.html, state: null"history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}"

Note that even though the original history entry (forhttp://example.com/example.html) has no state object associated with it, apopstate event is still fired when we activate that entry after the second call tohistory.back().

• Manipulating the browser history (the History API)
• Window:hashchange event