onfocusout-Ereignis
Definition und Verwendung
Das onfocusout-Ereignis tritt auf, wenn ein Element kurz vor dem Verlieren des Fokus steht.
Obwohl Firefox das onfocusout-Ereignis nicht unterstützt, können Sie durch die Verwendung eines Capturing Listener für das onblur-Ereignis (optionaler useCapture-Parameter der Methode addEventListener()) verstehen, ob die Unterlemente eines Elements den Fokus verlieren. Das onfocusout-Ereignis ähnelt onblur-EreignisHauptunterschied: Das onblur-Ereignis bläst nicht auf. Daher sollten Sie das onfocusout-Ereignis verwenden, um zu bestimmen, ob ein Element oder eines seiner Unterlemente den Fokus verliert.
Obwohl Firefox das onfocusout-Ereignis nicht unterstützt, können Sie durch die Verwendung eines Capturing Listener für das onblur-Ereignis (optionaler useCapture-Parameter der Methode addEventListener()) verstehen, ob die Unterlemente eines Elements den Fokus verlieren..
Obwohl Firefox das onfocusout-Ereignis nicht unterstützt, können Sie durch die Verwendung eines Capturing Listener für das onblur-Ereignis (optionaler useCapture-Parameter der Methode addEventListener()) verstehen, ob die Unterlemente eines Elements den Fokus verlieren. Hinweis: onfocusin-Ereignisonfocusout-Ereignis mit
Gegenteil.
Beispiel
Beispiel 1
Führen Sie JavaScript aus, wenn das Eingabefeld kurz vor dem Verlieren des Fokus steht:
<input type="text" onfocusout="myFunction()">
Unten auf der Seite gibt es mehr TIY-Beispiele.
Grammatik
In HTML:< element.addEventListener("focusout",onfocusout="
">
In JavaScript, verwenden Sie die Methode addEventListener():In JavaScript (kann in Chrome, Safari und Opera 15+ nicht wie erwartet funktionieren):.addEventListener("focusout",.onfocusout = function(){
};
In JavaScript, verwenden Sie die Methode addEventListener():object .addEventListener("focusout",myScript
Kommentar:); Internet Explorer 8 oder frühere Versionen unterstützen dies nichtaddEventListener() Methode
.
| Technische Details: | Unterstützt |
|---|---|
| Blasen: | Kann abgebrochen werden: |
| Nicht unterstützt: | FocusEvent |
| Unterstützte HTML-Tags: | Alle HTML-Elemente, außer: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> und <title> |
| DOM-Version: | Level 2 Events |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browser-Version an, die das Event vollständig unterstützt.
| Event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | Unterstützt | Unterstützt | 52.0 | Unterstützt | Unterstützt |
Kommentar:Hinweis: Der "onfocusout"-Event funktioniert möglicherweise nicht wie erwartet in Chrome, Safari und Opera 15+. Er sollte jedoch als HTML-Attribut verwendet werden und die Methode addEventListener() (siehe Beispiel unten) verwenden.
Mehr Beispiele
Beispiel 2
Verwenden Sie die "onfocusin"- und "onfocusout"-Events zusammen:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Beispiel 3
Event Delegation: Setzen Sie den "useCapture"-Parameter von addEventListener() auf true (verwendet für focus und blur):
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
Beispiel 4
Event Delegation: Verwenden Sie das "focusin"-Event:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
