Window: blur Ereignis
Das blur
Ereignis wird ausgelöst, wenn ein Element den Fokus verliert.
Das Gegenteil von blur
ist focus
.
Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergereicht.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("blur", (event) => {});
onblur = (event) => {};
Ereignistyp
Ein FocusEvent
. Erbt von UIEvent
und Event
.
Ereignis-Eigenschaften
Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten UIEvent
und indirekt von Event
.
-
Ein
EventTarget
, das ein sekundäres Ziel für dieses Ereignis darstellt. In einigen Fällen (wie beim Wechseln der Seitenansicht) kann diese Eigenschaft aus Sicherheitsgründen aufnull
gesetzt werden.
Beispiele
Live-Beispiel
Dieses Beispiel ändert das Erscheinungsbild eines Dokuments, wenn es den Fokus verliert. Es verwendet addEventListener()
, um focus
und blur
Ereignisse zu überwachen.
HTML
<p id="log">Click on this document to give it focus.</p>
CSS
.paused {
background: #ddd;
color: #555;
}
JavaScript
function pause() {
document.body.classList.add("paused");
log.textContent = "FOCUS LOST!";
}
function play() {
document.body.classList.remove("paused");
log.textContent =
"This document has focus. Click outside the document to lose focus.";
}
const log = document.getElementById("log");
window.addEventListener("blur", pause);
window.addEventListener("focus", play);
Ergebnis
Spezifikationen
Specification |
---|
UI Events # event-type-blur |
HTML Standard # handler-onblur |
Browser-Kompatibilität
BCD tables only load in the browser
Der Wert von Document.activeElement
variiert zwischen Browsern, während dieses Ereignis gehandhabt wird (Firefox-Bug 452307): IE10 setzt es auf das Element, zu dem der Fokus wechselt, während Firefox und Chrome es häufig auf den body
des Dokuments setzen.