Element: focus — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("focus", handler)

Beschreibung

Das focus-Ereignis tritt ein, sobald ein Element den Eingabefokus bekommt, etwa wenn der Nutzer in ein Eingabefeld klickt, mit Tab dorthin springt oder wenn ein Skript element.focus() aufruft. Sie können es über element.addEventListener("focus", handler) abonnieren oder über die Eigenschaft element.onfocus = handler zuweisen.

Das Ereignis ist ein FocusEvent. Seine Eigenschaft relatedTarget verweist auf das Element, das den Fokus gerade verloren hat, sofern es eines gibt. Typische Anwendungen sind das Hervorheben aktiver Formularfelder, das Einblenden von Hilfetexten, Autovervollständigung oder das Aufzeichnen von Nutzerinteraktionen.

Wichtig: focus steigt nicht auf (bubbles: false) und lässt sich nicht abbrechen. Wenn Sie den Fokus zentral an einem Elternelement abfangen wollen (Event-Delegation), nehmen Sie entweder focusin, das aufsteigt, oder registrieren Sie den Listener in der Capture-Phase ({ capture: true }). Das Gegenstück ist blur, das ausgelöst wird, wenn ein Element den Fokus verliert.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignistyp, hier `"focus"`.
$handler Pflicht	(event: FocusEvent) => void		Die Rückruffunktion. Sie bekommt ein `FocusEvent`-Objekt mit `target` (fokussiertes Element) und `relatedTarget` (Element, das den Fokus vorher hatte, oder `null`).
$options	boolean \| AddEventListenerOptions	false	Optionen wie `capture`, `once`, `passive` oder `signal`. Mit `capture: true` lässt sich `focus` auch an einem Elternelement abfangen.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt keinen Wert zurück. Der Handler erhält ein FocusEvent.

Beispiele

Aktives Eingabefeld hervorheben (addEventListener + blur)

const input = document.querySelector('#email');

input.addEventListener('focus', (event) => {
  event.target.classList.add('aktiv');
  console.log('Fokus erhalten:', event.target.id);
});

input.addEventListener('blur', (event) => {
  event.target.classList.remove('aktiv');
  console.log('Fokus verloren:', event.target.id);
});

Fokus erhalten: email Fokus verloren: email

Über die onfocus-Eigenschaft setzen und wieder entfernen

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

suche.onfocus = () => {
  hinweis.hidden = false;
};

// Handler später entfernen
const deaktivieren = () => {
  suche.onfocus = null;
};

suche.focus(); // löst focus aus, Hinweis wird angezeigt
deaktivieren();

Delegation im Formular per Capture-Phase und relatedTarget

const form = document.querySelector('#anmeldung');

// focus steigt nicht auf, deshalb capture: true
form.addEventListener('focus', (event) => {
  const vorher = event.relatedTarget?.name ?? '(keins)';
  console.log(`Wechsel von ${vorher} zu ${event.target.name}`);
}, { capture: true });

Wechsel von (keins) zu benutzername Wechsel von benutzername zu passwort

Listener mit AbortController wieder abmelden

const controller = new AbortController();
const feld = document.querySelector('#plz');

const beiFokus = () => console.log('PLZ-Feld fokussiert');
feld.addEventListener('focus', beiFokus, { signal: controller.signal });

feld.focus();       // Ausgabe erscheint
controller.abort(); // Listener entfernt
feld.blur();
feld.focus();       // keine Ausgabe mehr

PLZ-Feld fokussiert

// Wichtig · Fallstricke

Kein Bubbling: focus steigt nicht auf. Für Event-Delegation nehmen Sie focusin oder { capture: true }.
Nicht abbrechbar: event.preventDefault() verhindert den Fokuswechsel nicht. Wer den Fokus unterbinden will, muss vorher eingreifen, etwa bei mousedown.
Fokussierbarkeit: Nur fokussierbare Elemente lösen das Ereignis aus, also Formularelemente, Links mit href, button und Elemente mit tabindex. Bei einem div ohne tabindex passiert nichts.
Reihenfolge: Beim Fokuswechsel feuern die Ereignisse in dieser Reihenfolge: blur (altes Element) → focusout → focus (neues Element) → focusin. Ältere Browser weichen davon zum Teil ab.
Endlosschleifen vermeiden: Rufen Sie in einem focus-Handler nicht focus() auf einem anderen Element auf, wenn dessen Handler zurückspringt. Vermeiden Sie außerdem alert() im Handler, weil der Fokus dadurch wechselt.
Barrierefreiheit: Fokus-Stile sollten Sie besser mit CSS (:focus, :focus-visible) umsetzen als mit JavaScript. Verschieben Sie den Fokus nicht ungefragt, das verwirrt Nutzer von Screenreadern.
Kompatibilität: Wird von allen modernen Browsern unterstützt. relatedTarget kann aus Datenschutzgründen null sein, etwa wenn der Fokus aus einem anderen Dokument oder Fenster kommt.

Siehe auch

HTMLElement.prototype.focus() FocusEvent Document.activeElement EventTarget.prototype.addEventListener() Element: focusin