WorkerGlobalScope: languagechange — Ereignis · JavaScript-Referenz

Signatur

self.addEventListener("languagechange", handler)

Beschreibung

Das Ereignis languagechange wird am globalen Objekt eines Workers (WorkerGlobalScope, also self in einem Dedicated, Shared oder Service Worker) ausgelöst, sobald der Benutzer seine bevorzugten Sprachen in den Browser-Einstellungen ändert. Danach enthalten navigator.language und navigator.languages im Worker (WorkerNavigator) die neuen Werte.

Das Ereignis ist ein einfaches Event ohne zusätzliche Eigenschaften. Es lässt sich nicht abbrechen und steigt nicht auf (bubbelt nicht). Die neue Sprache liest du deshalb nicht aus dem Ereignisobjekt, sondern direkt aus navigator.languages.

Registrieren kannst du den Handler entweder mit self.addEventListener("languagechange", handler) oder über die Eigenschaft self.onlanguagechange = handler. Das Ereignis ist nützlich, wenn ein Worker sprachabhängige Aufgaben übernimmt: Er formatiert Zahlen und Datumswerte mit Intl, lädt Übersetzungsdateien vor oder baut gecachte Texte neu auf.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"languagechange"`.
$handler Pflicht	(event: Event) => void		Callback, das bei einer Sprachänderung aufgerufen wird. Es erhält ein einfaches `Event`-Objekt.
$options	boolean \| AddEventListenerOptions	false	Optionale Listener-Optionen wie `once` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Das Ereignisobjekt ist ein einfaches Event.

Beispiele

Sprachwechsel im Worker mit addEventListener erkennen

// worker.js
self.addEventListener("languagechange", () => {
  console.log("Neue Sprachen:", navigator.languages);
  self.postMessage({ type: "lang", languages: [...navigator.languages] });
});

Neue Sprachen: ["en-US", "en", "de"]

Intl-Formatierer bei Sprachwechsel neu erstellen

// worker.js
let formatter = new Intl.NumberFormat(navigator.language, { style: "currency", currency: "EUR" });

const onLangChange = () => {
  formatter = new Intl.NumberFormat(navigator.language, { style: "currency", currency: "EUR" });
  console.log(formatter.format(1234.5));
};

self.addEventListener("languagechange", onLangChange);

// Listener später wieder entfernen
self.addEventListener("message", (e) => {
  if (e.data === "stop") self.removeEventListener("languagechange", onLangChange);
});

€1,234.50

Alternative mit der Eigenschaft onlanguagechange

// worker.js
self.onlanguagechange = () => {
  const [primary] = navigator.languages;
  self.postMessage(`Bevorzugte Sprache jetzt: ${primary}`);
};

// Deaktivieren:
// self.onlanguagechange = null;

Bevorzugte Sprache jetzt: fr-FR

Hauptthread: Meldungen des Workers auswerten

// main.js
const worker = new Worker("worker.js");
worker.addEventListener("message", ({ data }) => {
  if (data.type === "lang") {
    document.documentElement.lang = data.languages[0];
  }
});

// Wichtig · Fallstricke

Das Ereignisobjekt enthält keine Sprachinformation. Lies die Werte aus navigator.language bzw. navigator.languages.
Das Ereignis wird nur ausgelöst, wenn der Benutzer die Browser-Einstellungen ändert. Beim Start des Workers gibt es kein languagechange. Die Anfangswerte musst du daher selbst auslesen.
Das Ereignis wird im Worker-Scope unabhängig vom window-Ereignis gleichen Namens ausgelöst. Den Hauptthread musst du bei Bedarf per postMessage informieren.
Browser-Kompatibilität: Im Window wird das Ereignis breit unterstützt. In Workern unterscheidet sich die Unterstützung je nach Browser, vor allem bei Service Workern, die ohnehin jederzeit beendet werden können. Verlass dich bei kritischer Logik nicht allein auf dieses Ereignis.
Datenschutz: Aus navigator.languages lassen sich Rückschlüsse für das Fingerprinting ziehen. Manche Browser mit Datenschutz-Modus (z. B. mit Resist-Fingerprinting) liefern vereinfachte Werte.

Siehe auch

WorkerGlobalScope WorkerNavigator.languages WorkerNavigator.language Intl EventTarget.addEventListener() MessagePort: message