Signatur
Beschreibung
Der Konstruktor NavigateEvent() erzeugt eine neue Instanz von NavigateEvent. Normalerweise legt der Browser solche Objekte selbst an und löst sie bei jeder Navigation als Ereignis navigate auf window.navigation aus. Mit dem Konstruktor kannst du eigene, nicht vertrauenswürdige Ereignisse (isTrusted === false) mit denselben Eigenschaften erstellen.
Gebraucht wird das vor allem in Tests und beim Simulieren: Du rufst die Routing-Logik einer Single-Page-App mit einem präparierten Ereignis auf, prüfst Verzweigungen nach navigationType, hashChange oder formData oder reichst ein Ereignis an eigene EventTarget-Objekte weiter.
Wichtig: Das Init-Objekt muss destination (ein NavigationDestination) und signal (ein AbortSignal) enthalten. Einen NavigationDestination kann man per Skript nicht selbst erzeugen. In der Praxis übernimmst du ihn deshalb aus einem echten navigate-Ereignis. Ein synthetisches Ereignis löst außerdem keine echte Navigation aus.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $type Pflicht | string | Name des Ereignisses, in der Regel "navigate". Groß- und Kleinschreibung zählt. |
|
| $eventInitDict Pflicht | object | Init-Objekt. Es erbt die Felder aus EventInit (bubbles, cancelable, composed) und hat zusätzlich folgende Felder:
|
Rückgabewert
NavigateEvent-Objekt mit den übergebenen Werten. isTrusted ist dabei immer false.Beispiele
Synthetisches Ereignis aus einem echten navigate-Ereignis ableiten
navigation.addEventListener("navigate", (event) => {
const controller = new AbortController();
// destination lässt sich nur aus einem echten Ereignis übernehmen
const kopie = new NavigateEvent("navigate", {
destination: event.destination,
signal: controller.signal,
navigationType: "replace",
canIntercept: true,
info: { quelle: "test" },
});
console.log(kopie.navigationType, kopie.info.quelle, kopie.isTrusted);
}, { once: true });
navigation.navigate("#abschnitt-2");Router-Logik testen, ohne wirklich zu navigieren
// Zu testende Router-Funktion
const behandleNavigation = (event) => {
if (event.hashChange || event.downloadRequest !== null) return "ignoriert";
if (event.formData) return "formular";
return `route:${new URL(event.destination.url).pathname}`;
};
navigation.addEventListener("navigate", (echt) => {
const controller = new AbortController();
const basis = { destination: echt.destination, signal: controller.signal };
const formData = new FormData();
formData.append("q", "javascript");
console.log(behandleNavigation(new NavigateEvent("navigate", { ...basis, hashChange: true })));
console.log(behandleNavigation(new NavigateEvent("navigate", { ...basis, formData })));
}, { once: true });
navigation.navigate("#test");Funktionsprüfung und Abbruchsignal
if ("NavigateEvent" in window) {
navigation.addEventListener("navigate", (echt) => {
const controller = new AbortController();
const ev = new NavigateEvent("navigate", {
destination: echt.destination,
signal: controller.signal,
});
ev.signal.addEventListener("abort", () => console.log("Navigation abgebrochen"));
controller.abort();
console.log(ev.signal.aborted);
}, { once: true });
navigation.navigate("#x");
} else {
console.log("Navigation API wird nicht unterstützt");
}