Zdarzenie onfocusout
Definicja i użycie
Zdarzenie onfocusout występuje, gdy element jest na progu utraty fokusu.
Chociaż Firefox nie obsługuje zdarzenia onfocusout, można zrozumieć, czy element lub jego podelementy tracą fokus, używając słuchacza zdarzenia onblur (opcjonalny parametr useCapture metody addEventListener()) Zdarzenie onfocusout jest podobne do Zdarzenie onblurGłówna różnica polega na tym, że zdarzenie onblur nie bąbelkuje. Dlatego, jeśli chcemy znaleźć, czy element lub jego podelementy tracą fokus, należy użyć zdarzenia onfocusout.
Chociaż Firefox nie obsługuje zdarzenia onfocusout, można zrozumieć, czy element lub jego podelementy tracą fokus, używając słuchacza zdarzenia onblur (opcjonalny parametr useCapture metody addEventListener()).
Chociaż Firefox nie obsługuje zdarzenia onfocusout, można zrozumieć, czy element lub jego podelementy tracą fokus, używając słuchacza zdarzenia onblur (opcjonalny parametr useCapture metody addEventListener()) Uwaga: Zdarzenie onfocusinZdarzenie onfocusout jest podobne do
Przeciwnie.
Przykład
Przykład 1
Wykonaj JavaScript, gdy pole wejściowe jest na progu utraty fokusu:
<input type="text" onfocusout="myFunction()">
Poniżej znajduje się więcej przykładów TIY.
Gramatyka
W HTML:< element.addEventListener("focusout",onfocusout="
">
W JavaScript, używając metody addEventListener():W JavaScript (może nie działać jak oczekiwane w Chrome, Safari i Opera 15+):.addEventListener("focusout",.onfocusout = function(){
};
W JavaScript, używając metody addEventListener():object .addEventListener("focusout",myScript
Komentarz:); Internet Explorer 8 lub wcześniejsze wersje nie obsługująMetoda addEventListener()
.
| Szczegóły techniczne | Obsługiwane przeglądarki |
|---|---|
| Bąbelkowanie: | Można anulować: |
| Nieobsługiwane | Zdarzenie FocusEvent |
| Obsługiwane znaczniki HTML: | Wszystkie elementy HTML, z wyjątkiem: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> oraz <title> |
| Wersja DOM: | Poziom 2 Wydarzenia |
Obsługa przeglądarek
Numer w tabeli wskazuje na pierwszą wersję przeglądarki, która w pełni obsługuje to wydarzenie.
| Wydarzenia | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | Obsługiwane przeglądarki | Obsługiwane przeglądarki | 52.0 | Obsługiwane przeglądarki | Obsługiwane przeglądarki |
Komentarz:Wydarzenie "onfocusout" może nie działać zgodnie z oczekiwaniami w przeglądarkach Chrome, Safari i Opera 15+, ale powinno być używane jako atrybut HTML i z metodą addEventListener() (zobacz poniższy przykład składni).
Więcej przykładów
Przykład 2
Użycie wydarzeń "onfocusin" i "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Przykład 3
Przekazywanie wydarzeń: ustawienie parametru useCapture w addEventListener() na true (używane dla focus i 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>
Przykład 4
Przekazywanie wydarzeń: użycie wydarzenia "focusin":
<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>
