Signatur
Beschreibung
Der Konstruktor NavigationCurrentEntryChangeEvent() erzeugt ein Ereignisobjekt der Navigation API. Normalerweise erzeugt der Browser solche Objekte selbst: Er löst das Ereignis currententrychange auf dem globalen navigation-Objekt aus, wenn sich navigation.currentEntry geändert hat, etwa durch navigation.navigate(), eine Vor-/Zurück-Navigation oder history.pushState().
Das Ereignis hat zwei eigene Eigenschaften: from enthält den NavigationHistoryEntry, der vorher aktuell war. navigationType gibt die Art der Navigation an ("push", "replace", "reload", "traverse") oder null, z. B. wenn nur navigation.updateCurrentEntry() aufgerufen wurde.
Selbst aufrufen muss man den Konstruktor fast nie. Nützlich ist er vor allem in Unit-Tests, wenn man einen currententrychange-Handler mit einem künstlichen Ereignis prüfen will, und für Polyfills oder Router-Bibliotheken, die das Verhalten der Navigation API nachbauen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Name des Ereignisses. Der Browser verwendet immer "currententrychange". |
|
| $eventInitDict Pflicht | object | Initialisierungsobjekt. Zusätzlich zu den EventInit-Optionen (bubbles, cancelable, composed) gibt es:
|
Beispiele
Ereignis manuell erzeugen
if ('navigation' in window) {
const event = new NavigationCurrentEntryChangeEvent('currententrychange', {
from: navigation.currentEntry,
navigationType: 'push'
});
console.log(event.type);
console.log(event.navigationType);
console.log(event.from === navigation.currentEntry);
console.log(event.isTrusted);
}Auf echte Eintragswechsel reagieren (z. B. für Analytics)
const onEntryChange = (event) => {
const { from, navigationType } = event;
console.log(`Wechsel (${navigationType ?? 'Update'}): ${from.url} → ${navigation.currentEntry.url}`);
};
navigation.addEventListener('currententrychange', onEntryChange);
// Später, z. B. beim Abbau einer Komponente:
// navigation.removeEventListener('currententrychange', onEntryChange);Handler im Test mit künstlichem Ereignis prüfen
const seiten = [];
const trackPage = (event) => {
if (event.navigationType !== null) {
seiten.push(navigation.currentEntry.url);
}
};
navigation.addEventListener('currententrychange', trackPage);
// Künstliches Ereignis auslösen, ohne wirklich zu navigieren
navigation.dispatchEvent(
new NavigationCurrentEntryChangeEvent('currententrychange', {
from: navigation.currentEntry,
navigationType: 'replace'
})
);
console.log(seiten.length);
navigation.removeEventListener('currententrychange', trackPage);// Wichtig · Fallstricke
- Pflichtfeld
from: Fehltfromoder ist es kein echterNavigationHistoryEntry, wirft der Konstruktor einenTypeError. Eigene Einträge lassen sich nicht erzeugen. Man muss einen vorhandenen verwenden, z. B.navigation.currentEntryoder einen ausnavigation.entries(). - Keine echte Navigation: Wenn man das Ereignis selbst mit
dispatchEvent()auslöst, ändern sich weder URL nochnavigation.currentEntry. Es werden nur die registrierten Handler aufgerufen, undisTrustedistfalse. - Nicht abbrechbar:
currententrychangewird erst nach dem Wechsel ausgelöst. Um eine Navigation abzufangen oder abzubrechen, ist das Ereignisnavigategedacht. - Browser-Kompatibilität: Die Navigation API gibt es in Chromium-Browsern seit Version 102. Firefox und Safari unterstützen sie erst in neueren Versionen. Vor der Nutzung mit
'navigation' in windowbzw.typeof NavigationCurrentEntryChangeEvent !== 'undefined'prüfen. Die API funktioniert nur im Fenster-Kontext, nicht in Workern.