Element: focusout Ereignis

Das focusout-Ereignis wird ausgelöst, wenn ein Element den Fokus verloren hat, nach dem blur-Ereignis. Die beiden Ereignisse unterscheiden sich darin, dass focusout aufsteigt, während blur dies nicht tut.

Das Gegenteil von focusout ist das focusin-Ereignis, das ausgelöst wird, wenn das Element den Fokus erhalten hat.

Das focusout-Ereignis kann nicht abgebrochen werden.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener().

js
addEventListener("focusout", (event) => {});

Ereignistyp

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten UIEvent und indirekt von Event.

FocusEvent.relatedTarget

Das Element, das den Fokus erhält, falls vorhanden.

Beispiele

Live-Beispiel

HTML

html
<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>

JavaScript

js
const form = document.getElementById("form");

form.addEventListener("focusin", (event) => {
  event.target.style.background = "pink";
});

form.addEventListener("focusout", (event) => {
  event.target.style.background = "";
});

Ergebnis

Spezifikationen

Specification
UI Events
# event-type-focusout

Hinweis: Die UI Events-Spezifikation beschreibt eine Reihenfolge von Fokusereignissen, die von den aktuellen Browsern unterschiedlich implementiert wird.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch