Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
Dasfocus-Ereignis wird ausgelöst, wenn ein Element den Fokus erhalten hat. Das Ereignis wird nicht im DOM weitergeleitet, aber das zugehörigefocusin-Ereignis, das darauf folgt, wird weitergeleitet.
Das Gegenstück zufocus ist dasblur-Ereignis, das ausgelöst wird, wenn das Element den Fokusverloren hat.
Dasfocus-Ereignis kann nicht abgebrochen werden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wieaddEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("focus", (event) => { })onfocus = (event) => { }Ereignistyp
EinFocusEvent. Erbt vonUIEvent undEvent.
Ereigniseigenschaften
Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordnetenUIEvent und indirekt vonEvent.
FocusEvent.relatedTargetDas Element, das den Fokus verliert, falls vorhanden.
Beispiele
Einfaches Beispiel
HTML
<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 desfocusin-Ereignisses oder durch Setzen desuseCapture-Parameters vonaddEventListener() auftrue.
HTML
<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