When does popstate fire?

Question

I put all of my code in $(document).ready as per norm, but should I put my 'popstate' listener at the very end of this code too? Or does it matter?

Answer 1

This doesn't really matter, and since it's an event, can even be done before your ready method. The only thing needing to be placed inside document ready is code interacting with the DOM. Everything else doesn't (and possibly shouldn't) be placed in document ready.

Example:

window.onpopstate = function() {
    // binding this event can be done anywhere, 
    // but shouldn't be inside document ready
};

$(document).ready(function() {
    // DOM manipulation and other stuff
});

Now when popstate actually is triggered is a lot different than when it is bound. According to the Mozilla doc:

A popstate event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState(), the popstate event's state property contains a copy of the history entry's state object.

Answer 2

I was confused, because popstate was firing on every page load (I use chrome).

From https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate:

Browsers tend to handle the popstate event differently on page load. Chrome and Safari always emit a popstate event on page load, but Firefox doesn't.

So in chrome (and apparently safari), the jquery ready method will execute, followed by the popstate event. i.e. it doesn't matter if you attach the event within ready (or body.onload for that matter), the popstate event will happen after your ready method is complete.

In firefox (16.0.1) the popstate event does not fire on page loads (I can't test IE 10).

Answer 3

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

Calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in JavaScript), when navigating between two history entries for the same document.