Element: blur — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("blur", handler)

Beschreibung

Das blur-Ereignis tritt auf, sobald ein fokussierbares Element (z. B. <input>, <button>, <a href> oder ein Element mit tabindex) den Fokus verliert. Das passiert etwa durch einen Klick auf eine andere Stelle, durch die Tab-Taste, durch einen Aufruf von element.blur() oder wenn das Fenster in den Hintergrund wechselt. Das Ereignisobjekt ist ein FocusEvent.

Typische Anwendungen sind die Validierung von Formularfeldern beim Verlassen, das automatische Speichern von Eingaben, das Schließen von Dropdowns oder Popovers und das Zurücksetzen von Hervorhebungen. Registrieren kann man den Handler per addEventListener("blur", handler) oder über die Eigenschaft element.onblur = handler.

Wichtig: blur bubblet nicht. Wer das Ereignis zentral an einem Elternelement abfangen möchte (Event Delegation), nutzt stattdessen focusout, das dieselbe Bedeutung hat, aber aufsteigt – oder registriert blur mit { capture: true }. Über event.relatedTarget erfährt man, welches Element den Fokus als Nächstes erhält (oder null).

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"blur"`.
$handler Pflicht	(event: FocusEvent) => void		Callback, der beim Fokusverlust mit einem `FocusEvent` aufgerufen wird. `event.target` ist das Element, das den Fokus verliert, `event.relatedTarget` das Element, das ihn erhält (oder `null`).
$options	boolean \| AddEventListenerOptions	false	Optionen wie `capture`, `once`, `passive` oder `signal`. Mit `capture: true` lässt sich `blur` trotz fehlendem Bubbling an einem Vorfahren abfangen.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Das Ereignis selbst ist nicht abbrechbar (cancelable: false); preventDefault() hat keine Wirkung.

Beispiele

E-Mail-Feld beim Verlassen validieren

// HTML: <input id="email" type="email"> <span id="fehler"></span>
const email = document.querySelector('#email');
const fehler = document.querySelector('#fehler');

const pruefen = (event) => {
  const feld = event.target;
  if (feld.value && !feld.checkValidity()) {
    fehler.textContent = 'Bitte eine gültige E-Mail-Adresse eingeben.';
    feld.setAttribute('aria-invalid', 'true');
  } else {
    fehler.textContent = '';
    feld.removeAttribute('aria-invalid');
  }
};

email.addEventListener('blur', pruefen);

Handler per onblur setzen und wieder entfernen

const suche = document.querySelector('#suche');

// Variante 1: on-Property (nur ein Handler möglich)
suche.onblur = () => console.log('Suchfeld verlassen');

// Variante 2: addEventListener + removeEventListener
const logBlur = (e) => console.log('blur:', e.target.id);
suche.addEventListener('blur', logBlur);

// Später wieder abmelden – gleiche Funktionsreferenz nötig
suche.removeEventListener('blur', logBlur);
suche.onblur = null;

Suchfeld verlassen blur: suche

Dropdown schließen – außer der Fokus wandert ins Menü

const trigger = document.querySelector('#menue-button');
const menue = document.querySelector('#menue');

trigger.addEventListener('blur', (event) => {
  // relatedTarget = Element, das jetzt den Fokus bekommt
  if (!menue.contains(event.relatedTarget)) {
    menue.hidden = true;
  }
});

Delegation per Capture bzw. focusout

const formular = document.querySelector('form');

// blur bubblet nicht – daher Capture-Phase nutzen
formular.addEventListener('blur', (e) => {
  if (e.target.matches('input, textarea')) {
    console.log(`Feld "${e.target.name}" verlassen`);
  }
}, { capture: true });

// Gleichwertige Alternative mit bubbelndem focusout
formular.addEventListener('focusout', (e) => {
  localStorage.setItem(`entwurf-${e.target.name}`, e.target.value);
});

Feld "vorname" verlassen

// Wichtig · Fallstricke

Kein Bubbling: Ein blur-Listener am Elternelement feuert in der Bubbling-Phase nicht. Verwende focusout oder { capture: true }.
Reihenfolge: Bei einem Fokuswechsel kommt zuerst blur, dann focusout, danach focus und focusin am neuen Element. Beim Wechsel sind document.activeElement kurzzeitig body – event.relatedTarget ist zuverlässiger.
relatedTarget kann null sein, z. B. beim Klick auf nicht fokussierbare Bereiche, beim Fensterwechsel oder aus Datenschutzgründen bei Fokus in einem fremden iframe.
Fenster-/Tab-Wechsel löst ebenfalls blur am aktiven Element aus – Validierungsmeldungen können dadurch unerwartet erscheinen.
Nicht fokussierbare Elemente (z. B. <div> ohne tabindex) erhalten nie blur.
Kein alert() im blur-Handler aufrufen und den Fokus nicht per focus() zurückzwingen – das erzeugt Fokusschleifen und schadet der Barrierefreiheit.
Kompatibilität: in allen Browsern seit jeher unterstützt; relatedTarget in allen modernen Browsern.

Siehe auch

FocusEvent HTMLElement.prototype.blur() Document.activeElement Element: cut Element: click