popstate 事件
响应浏览器的后退和前进导航
popstate 事件 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
popstate 的作用
当用户浏览历史记录时（返回、前进或调用 JavaScript 的 history.back），popstate 事件会在窗口上触发。它让 SPA 能够响应浏览器发起的导航，重新渲染正确的视图。
触发时机
点击返回或前进按钮、调用 history.back()、history.forward() 和 history.go(n) 时，popstate 都会触发。它不会（NOT）在您手动调用 pushState/replaceState 时触发——这些是程序化更新，页面本身已经知道相关变化。
window.addEventListener("popstate", (e) => {
console.log("Navigated to", location.pathname, "state:", e.state);
renderPage(location.pathname);
});状态属性
事件的 state 属性包含您为即将导航到的记录项传给 pushState/replaceState 的状态对象。请使用它恢复不在 URL 中的界面状态（例如打开的标签页和滚动位置）。
读取新 URL
popstate 触发时，地址栏已经更新。请读取 location.pathname、location.search 和 location.hash 来获取新的 URL。结合状态对象，这些信息足以渲染目标视图。
初始页面加载
popstate 不会（NOT）在初始页面加载时触发，只会在导航时触发。启动时请根据 location 渲染初始视图，然后让 popstate 处理后续导航。否则，第一次返回导航到达时，初始页面会变成空白。
// Initial render
renderPage(location.pathname);
// Future navigation
window.addEventListener("popstate", () => renderPage(location.pathname));hashchange 与 popstate
对于纯哈希路由（例如 /#/about 这样的 URL），哈希发生变化时会触发 hashchange 事件。popstate 还会在路径发生变化时触发。现代 SPA 使用 History 接口和 popstate；哈希路由属于旧式方案。
拦截点击
要让普通的 <a> 点击触发客户端导航，请拦截点击、调用 preventDefault，然后调用 pushState + renderPage。请检查修饰键（使用 Cmd/Ctrl 点击可打开新标签页），并让这类点击继续采用默认行为。
document.addEventListener("click", (e) => {
const a = e.target.closest("a");
if (!a || a.target || e.metaKey || e.ctrlKey) return;
e.preventDefault();
history.pushState(null, "", a.href);
renderPage(location.pathname);
});恢复滚动位置
浏览器会尝试在返回导航时自动恢复滚动位置，但在 SPA 中并不可靠，因为内容是异步渲染的。请将滚动位置保存到 pushState 的状态中，并在 popstate 中恢复：window.scrollTo(0, e.state?.scroll ?? 0)。
异步渲染注意事项
如果 renderPage 异步获取数据，URL 会先于内容更新。请先显示加载状态，然后再进行渲染。要避免这样的竞态：用户在获取数据期间点击返回，而已取消请求的结果覆盖了新的视图。
框架路由器
React Router、Vue Router 和 SvelteKit 的路由器都封装了 History 接口与 popstate。即使不使用框架，底层原语也相同——监听 popstate、拦截链接并调用 pushState。当开销很重要时，您可以用约 50 行原生 JavaScript 自行编写路由器。
常见陷阱：内存泄漏
每个视图的初始化都可能附加事件监听器和计时器。如果在视图变更时（在 popstate 中或 pushState 封装器中）不显式拆除，监听器就会不断累积，导致性能随时间下降。请使用 AbortController 跟踪每个视图的订阅，并在视图变更时中止。
知识检查
为什么您调用 history.pushState 时不会触发 popstate 事件？
总结
popstate 会在浏览器返回或前进导航时触发，让您能够访问保存的状态和新的位置。调用 pushState/replaceState 时不会触发它（您的代码已经知道这些变化），初始页面加载时也不会触发（请手动渲染）。请拦截链接点击以实现 SPA 导航，将滚动位置保存到状态中，并在视图变更时拆除监听器以防止泄漏。
常见问题解答
「popstate 事件」课时是免费的吗？
是的 — 「popstate 事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「popstate 事件」这节课中我会学到什么？
响应浏览器的后退和前进导航 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「popstate 事件」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。