Het popstate-event
Reageer op de terug- en vooruitnavigatie van de browser
Het popstate-event is een gratis HTML Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.
Wat popstate doet
De gebeurtenis popstate wordt op het venster geactiveerd wanneer de gebruiker door de geschiedenis navigeert, bijvoorbeeld achteruit, vooruit of met een aanroep van history.back vanuit JavaScript. Hiermee kan de SPA de juiste weergave opnieuw opbouwen als reactie op navigatie die door de browser is gestart.
Wanneer deze wordt geactiveerd
popstate wordt geactiveerd wanneer je op de knoppen voor achteruit- of vooruitnavigatie klikt, en bij history.back(), history.forward() en history.go(n). Deze gebeurtenis wordt NIET geactiveerd wanneer pushState of replaceState handmatig wordt aangeroepen — dat zijn programmatische updates en de pagina weet daar al van.
window.addEventListener("popstate", (e) => {
console.log("Navigated to", location.pathname, "state:", e.state);
renderPage(location.pathname);
});De eigenschap state
De eigenschap state van de gebeurtenis bevat het statusobject dat je aan pushState of replaceState hebt meegegeven voor het geschiedenisitem waarnaar je navigeert. Gebruik dit om de UI-status te herstellen, zoals het geopende tabblad of de scrollpositie, die niet in de URL staat.
De nieuwe URL lezen
De adresbalk is al bijgewerkt wanneer popstate wordt geactiveerd. Lees location.pathname, location.search en location.hash om de nieuwe URL te vinden. Samen met de status is dit alle informatie die nodig is om de bestemmingsweergave op te bouwen.
Eerste keer laden van de pagina
popstate wordt NIET geactiveerd wanneer de pagina voor het eerst wordt geladen — alleen tijdens navigatie. Bouw bij het opstarten de eerste weergave op vanuit location en laat popstate daarna de volgende navigaties afhandelen. Zonder dit blijft de eerste pagina leeg wanneer de eerste achteruitnavigatie daar aankomt.
// Initial render
renderPage(location.pathname);
// Future navigation
window.addEventListener("popstate", () => renderPage(location.pathname));hashchange versus popstate
Bij routering die uitsluitend op hashes is gebaseerd, zoals bij URL's als /#/about, wordt de gebeurtenis hashchange geactiveerd wanneer de hash verandert. popstate wordt ook geactiveerd bij wijzigingen van het pad. Moderne SPA's gebruiken de History API en popstate; routering met hashes is verouderd.
Klikken onderscheppen
Als je een gewone klik op <a> clientnavigatie wilt laten starten, onderschep je de klik, roep je preventDefault aan en gebruik je pushState + renderPage. Controleer modificatietoetsen, zoals Cmd/Ctrl bij een klik om een nieuw tabblad te openen, en laat zulke klikken over aan het standaardgedrag.
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);
});De scrollpositie herstellen
Browsers proberen de scrollpositie automatisch te herstellen bij achteruitnavigatie, maar dit is in SPA's onbetrouwbaar omdat inhoud asynchroon wordt weergegeven. Sla de scrollpositie op in de status van pushState en herstel deze in popstate: window.scrollTo(0, e.state?.scroll ?? 0).
Aandachtspunt bij asynchroon weergeven
Als renderPage gegevens asynchroon ophaalt, wordt de URL bijgewerkt voordat de inhoud binnen is. Toon een laadstatus en geef daarna de inhoud weer. Voorkom raceomstandigheden waarbij de gebruiker tijdens het ophalen achteruit navigeert en het resultaat van de geannuleerde ophaalactie de nieuwe weergave overschrijft.
Routers van frameworks
De router van React Router, Vue Router en SvelteKit wikkelt History en popstate allemaal in. Ook zonder framework is het onderliggende primitief hetzelfde — luister naar popstate, onderschep links en roep pushState aan. Schrijf je eigen router in ongeveer 50 regels gewone JavaScript wanneer overhead belangrijk is.
Veelgemaakte fout: geheugenlekken
De initialisatie van elke weergave kan gebeurtenislisteners en timers koppelen. Zonder expliciete opruiming wanneer de weergave verandert, in popstate of in de pushState-wrapper, stapelen listeners zich op en nemen de prestaties na verloop van tijd af. Houd abonnementen per weergave bij met een AbortController en breek ze af wanneer de weergave verandert.
Kenniscontrole
Waarom wordt de gebeurtenis popstate NIET geactiveerd wanneer je zelf history.pushState aanroept?
Samenvatting
popstate wordt geactiveerd bij achteruit- en vooruitnavigatie in de browser en geeft toegang tot de opgeslagen status en de nieuwe locatie. De gebeurtenis wordt niet geactiveerd bij pushState of replaceState, omdat je code daar al van op de hoogte is, en ook niet bij het voor het eerst laden van de pagina, omdat je de weergave dan handmatig moet opbouwen. Onderschep kliks op links voor SPA-navigatie, sla de scrollpositie op in de status en ruim listeners op wanneer de weergave verandert om lekken te voorkomen.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Het popstate-event” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “Het popstate-event”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.
Wat leer ik in “Het popstate-event”?
Reageer op de terug- en vooruitnavigatie van de browser Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met HTML Academy te beginnen?
Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Het popstate-event”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over HTML Academy?
Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- pushState en replaceState
- Het popstate-event
- Routing op basis van hash versus pad
- De Navigation API in moderne browsers