Element: focus Event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das focus-Ereignis wird ausgelöst, wenn ein Element den Fokus erhalten hat. Das Ereignis wird nicht im DOM weitergeleitet, aber das zugehörige focusin-Ereignis, das darauf folgt, wird weitergeleitet.
Das Gegenstück zu focus ist das blur-Ereignis, das ausgelöst wird, wenn das Element den Fokus verloren hat.
Das focus-Ereignis kann nicht abgebrochen werden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("focus", (event) => { }) onfocus = (event) => { } Ereignistyp
Ein FocusEvent. Erbt von UIEvent und Event.
Ereigniseigenschaften
Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten UIEvent und indirekt von Event.
-
Das Element, das den Fokus verliert, falls vorhanden.
Beispiele
Einfaches Beispiel
HTML
<form id="form"> <label> Some text: <input type="text" placeholder="text input" /> </label> <label> Password: <input type="password" placeholder="password" /> </label> </form> JavaScript
const password = document.querySelector('input[type="password"]'); password.addEventListener("focus", (event) => { event.target.style.background = "pink"; }); password.addEventListener("blur", (event) => { event.target.style.background = ""; }); Ergebnis
Ereignisdelegierung
Es gibt zwei Möglichkeiten, die Ereignisdelegierung für dieses Ereignis zu implementieren: durch Verwendung des focusin-Ereignisses oder durch Setzen des useCapture-Parameters von addEventListener() auf true.
HTML
<form id="form"> <label> Some text: <input type="text" placeholder="text input" /> </label> <label> Password: <input type="password" placeholder="password" /> </label> </form> JavaScript
const form = document.getElementById("form"); form.addEventListener( "focus", (event) => { event.target.style.background = "pink"; }, true, ); form.addEventListener( "blur", (event) => { event.target.style.background = ""; }, true, ); Ergebnis
Spezifikationen
| Specification |
|---|
| UI Events # event-type-focus |
| HTML # handler-onfocus |
Browser-Kompatibilität
Siehe auch
- Die
HTMLElement.focus()-Methode - Verwandte Ereignisse:
blur,focusin,focusout - Dieses Ereignis auf
Window-Ziele:focusEreignis - Fokussieren: focus/blur