Window: focus — Ereignis · JavaScript-Referenz

Signatur

window.addEventListener("focus", handler)

Beschreibung

Das focus-Ereignis am Window-Objekt wird ausgelöst, sobald das Browserfenster oder der Tab den Eingabefokus erhält. Das passiert etwa, wenn der Nutzer von einer anderen Anwendung zurückwechselt, auf das Fenster klickt oder aus einem anderen Tab zurückkommt. Das Gegenstück ist das blur-Ereignis, das beim Verlust des Fokus ausgelöst wird.

Registrieren lässt es sich über window.addEventListener("focus", handler) oder über die Eigenschaft window.onfocus = handler. Der Handler erhält ein FocusEvent. Das Ereignis steigt nicht auf (bubbles: false) und lässt sich nicht abbrechen.

Typische Anwendungsfälle sind das Aktualisieren veralteter Daten, wenn der Nutzer zurückkehrt („Refetch on focus“), das Fortsetzen von Animationen oder Polling und das Zurücksetzen von Benachrichtigungszählern im Seitentitel.

Wichtig: Da focus nicht aufsteigt, landen Fokus-Ereignisse einzelner Elemente (z. B. <input>) nicht über die Bubbling-Phase beim window. Ein Listener mit capture: true am window fängt sie jedoch ab. Deshalb sollte man im Handler per event.target === window prüfen, ob wirklich das Fenster gemeint ist.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname, hier `"focus"`.
$handler Pflicht	(event: FocusEvent) => void		Callback, der beim Fokuserhalt des Fensters aufgerufen wird. `event.target` ist das `window`; `event.relatedTarget` ist in der Regel `null`.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `capture` oder `signal` (zum Entfernen per `AbortController`).

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein FocusEvent-Objekt.

Beispiele

Daten neu laden, wenn der Nutzer zurückkehrt

const loadNotifications = async () => {
  const res = await fetch('/api/notifications');
  const data = await res.json();
  console.log(`Neue Benachrichtigungen: ${data.length}`);
};

window.addEventListener('focus', (event) => {
  // Nur reagieren, wenn das Fenster selbst den Fokus erhält
  if (event.target !== window) return;
  loadNotifications();
});

Neue Benachrichtigungen: 3

Seitentitel per onfocus/onblur umschalten

const originalTitle = document.title;

window.onblur = () => {
  document.title = '👋 Komm zurück!';
};

window.onfocus = () => {
  document.title = originalTitle;
  console.log('Fenster wieder aktiv');
};

Fenster wieder aktiv

Listener mit AbortController wieder entfernen

const controller = new AbortController();
let count = 0;

const onFocus = () => {
  count += 1;
  console.log(`Fokus erhalten (${count}x)`);
  if (count >= 3) {
    controller.abort(); // entfernt den Listener
    console.log('Listener entfernt');
  }
};

window.addEventListener('focus', onFocus, { signal: controller.signal });

// Alternativ klassisch:
// window.removeEventListener('focus', onFocus);

Fokus erhalten (1x) Fokus erhalten (2x) Fokus erhalten (3x) Listener entfernt

// Wichtig · Fallstricke

Kein Bubbling: focus steigt nicht auf. Wer Fokuswechsel von Elementen zentral beobachten will, nimmt focusin oder registriert den Listener mit capture: true. Im Capture-Modus löst der Handler dann aber auch bei Element-Fokus aus, daher event.target === window prüfen.
Nicht gleichbedeutend mit Sichtbarkeit: Ein Fenster kann sichtbar sein, ohne den Fokus zu haben (z. B. zwei Fenster nebeneinander, oder der Fokus liegt in einem <iframe>). Ob der Tab sichtbar ist, erkennt man zuverlässiger mit visibilitychange und document.visibilityState.
iframes: Klickt der Nutzer in ein eingebettetes <iframe>, löst das übergeordnete Fenster blur aus. Beim Zurückklicken folgt wieder focus.
Entwicklerwerkzeuge: Klicks in die DevTools lösen ebenfalls blur/focus aus. Das kann beim Debuggen verwirren.
Den aktuellen Zustand liefert document.hasFocus(), zum Beispiel beim Laden der Seite, bevor überhaupt ein Ereignis eingetroffen ist.
Kompatibilität: wird seit Langem von allen Browsern unterstützt. Auf Mobilgeräten ist das Verhalten beim Tab- oder App-Wechsel aber nicht einheitlich; dort ist visibilitychange robuster.

Siehe auch

Document.hasFocus() FocusEvent EventTarget.addEventListener() Animation: finish Window: blur