当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。
需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()或者history.forward()方法）
不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件，但Firefox则不会。
| Property | Type | Description |
|---|---|---|
target {{readonlyInline}} |
{{domxref("EventTarget")}} | The browsing context (window). |
type {{readonlyInline}} |
{{domxref("DOMString")}} | The type of event. |
bubbles {{readonlyInline}} |
{{jsxref("Boolean")}} | Whether the event normally bubbles or not. |
cancelable {{readonlyInline}} |
{{jsxref("Boolean")}} | Whether the event is cancellable or not. |
state {{readonlyInline}} |
any | The current history entry's state object (if any). |
{{ CompatibilityTable() }}
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | Yes | {{ CompatGeckoDesktop("2") }} | 10.0 | Yes | limited |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 3.0 (buggy in 2.2 and 2.3) | {{ CompatGeckoMobile("2") }} | 10.0 | Yes | limited |
打开http://example.com/example.html页面运行以下代码， 会按预期那样打出log提示。
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}使用onpopstate事件处理程序属性的相同示例：
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(); // 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}注意，虽然原始的历史项（ http://example.com/example.html所对应的）没有关联的状态对象（state object），但稍后调用history.back()激活该历史项时，仍会触发popstate事件。