Προτεινόμενα μαθήματα:
Το συμβάν onfocusout
Ορισμός και χρήση
Αν και το Firefox δεν υποστηρίζει το συμβάν onfocusout, μπορείτε να κατανοήσετε αν τα υποστοιχεία του στοιχείου χάνουν την εστία χρησιμοποιώντας τον καταχώρητη άκρο του συμβάντος onblur (χρησιμοποιώντας τον παραμέτρο useCapture της μεθόδου addEventListener()). Η κύρια διαφορά είναι ότι το συμβάν onblur δεν παραβόληση. Επομένως, αν θέλετε να βρείτε αν το στοιχείο ή τα υποστοιχεία του χάνουν την εστία, θα πρέπει να χρησιμοποιήσετε το συμβάν onfocusout. Το συμβάν onfocusout συμβαίνει όταν το στοιχείο χάνει την εστία. συνέδρασις onblurΤο συμβάν onfocusout είναι παρόμοιο με
Αν και το Firefox δεν υποστηρίζει το συμβάν onfocusout, μπορείτε να κατανοήσετε αν τα υποστοιχεία του στοιχείου χάνουν την εστία χρησιμοποιώντας τον καταχώρητη άκρο του συμβάντος onblur (χρησιμοποιώντας τον παραμέτρο useCapture της μεθόδου addEventListener()). Η κύρια διαφορά είναι ότι το συμβάν onblur δεν παραβόληση. Επομένως, αν θέλετε να βρείτε αν το στοιχείο ή τα υποστοιχεία του χάνουν την εστία, θα πρέπει να χρησιμοποιήσετε το συμβάν onfocusout.。
Αν και το Firefox δεν υποστηρίζει το συμβάν onfocusout, μπορείτε να κατανοήσετε αν τα υποστοιχεία του στοιχείου χάνουν την εστία χρησιμοποιώντας τον καταχώρητη άκρο του συμβάντος onblur (χρησιμοποιώντας τον παραμέτρο useCapture της μεθόδου addEventListener()). Η κύρια διαφορά είναι ότι το συμβάν onblur δεν παραβόληση. Επομένως, αν θέλετε να βρείτε αν το στοιχείο ή τα υποστοιχεία του χάνουν την εστία, θα πρέπει να χρησιμοποιήσετε το συμβάν onfocusout. Συμβουλή: συνέδρασις onfocusinΤο συμβάν onfocusout είναι παρόμοιο με
Αντίθετα.
Εκδείγματα
Παράδειγμα 1
Εκτέλεση JavaScript όταν το πεδίο εισαγωγής χάνει την εστία:
<input type="text" onfocusout="myFunction()">
Στην ιστοσελίδα υπάρχει περισσότερος TIY παράδειγμα.
Γραμματική
Στο HTML:< element.addEventListener("focusout",onfocusout="
">
Στο JavaScript, χρησιμοποιώντας τη μέθοδο addEventListener():Στο JavaScript (μπορεί να μην λειτουργεί όπως αναμένεται στο Chrome, Safari και Opera 15+):.addEventListener("focusout",.onfocusout = function(){
};
Στο JavaScript, χρησιμοποιώντας τη μέθοδο addEventListener():object .addEventListener("focusout",myScript
Σημείωση:); Internet Explorer 8 ή παλιότερες εκδόσεις δεν υποστηρίζουνΜέθοδος addEventListener()
。
| Τεχνικά λεπτομέρειες | Υποστήριξη |
|---|---|
| Παραβόληση: | Κατάργηση: |
| Μη υποστηριζόμενα: | FocusEvent |
| Υποστηριζόμενα στοιχεία HTML: | Όλα τα στοιχεία HTML, εκτός από：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> και <title> |
| Έκδοση DOM: | Level 2 Events |
Υποστήριξη προγράμματος περιήγησης
Ο αριθμός στο πίνακα σημειώνει την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως το γεγονός.
| Γεγονότα | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | Υποστήριξη | Υποστήριξη | 52.0 | Υποστήριξη | Υποστήριξη |
Σημείωση:Το γεγονός onfocusout μπορεί να μην λειτουργεί όπως αναμένεται στο Chrome, Safari και Opera 15+. Ωστόσο, θα πρέπει να χρησιμοποιείται ως ιδιότητα HTML και να χρησιμοποιείται η μέθοδος addEventListener() (βλέπε παρακάτω παράδειγμα γραμματικής).
Περισσότερα παραδείγματα
Παράδειγμα 2
Χρήση των γεγονότων onfocusin και onfocusout:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Παράδειγμα 3
Αντιπροσωπευτική γεγονότων: Ξεκινήστε το addEventListener() με το παράμετρο useCapture σε true (για focus και 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>
Παράδειγμα 4
Αντιπροσωπευτική γεγονότων: Χρήση γεγονότων 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>
