Aanbevolen cursus:
onfocusout-gebeurtenis
Definitie en gebruik
Hoewel Firefox de onfocusout-gebeurtenis niet ondersteunt, kunt u door gebruik te maken van een capture listener voor het onblur-gebeurtenis (met behulp van de optionele useCapture parameter van de addEventListener() methode) begrijpen of de subelementen van een element de focus verliezen. Het onfocusout-gebeurtenis treedt op wanneer een element op het punt staat om de focus te verliezen. onblur eventHet onfocusout-gebeurtenis is vergelijkbaar met
Hoewel Firefox de onfocusout-gebeurtenis niet ondersteunt, kunt u door gebruik te maken van een capture listener voor het onblur-gebeurtenis (met behulp van de optionele useCapture parameter van de addEventListener() methode) begrijpen of de subelementen van een element de focus verliezen.. Het belangrijkste verschil is dat het onblur-gebeurtenis niet bubbelt. Daarom, als u wilt weten of een element of een van zijn subelementen de focus verliest, moet u het onfocusout-gebeurtenis gebruiken.
Hoewel Firefox de onfocusout-gebeurtenis niet ondersteunt, kunt u door gebruik te maken van een capture listener voor het onblur-gebeurtenis (met behulp van de optionele useCapture parameter van de addEventListener() methode) begrijpen of de subelementen van een element de focus verliezen. Tip: onfocusin eventonfocusout-gebeurtenis met
Omgekeerd.
Voorbeeld
Voorbeeld 1
Voer JavaScript uit wanneer het invoerveld op het punt staat om de focus te verliezen:
<input type="text" onfocusout="myFunction()">
Er zijn meer TIY-exempelen onder de pagina.
Syntax
In HTML:< element.addEventListener("focusout",onfocusout="
">
In JavaScript, gebruik de addEventListener() methode:In JavaScript (kan niet zoals verwacht werken in Chrome, Safari en Opera 15+):.addEventListener("focusout",.onfocusout = function(){
};
In JavaScript, gebruik de addEventListener() methode:object .addEventListener("focusout",myScript
Note:); Internet Explorer 8 of eerder ondersteunt nietaddEventListener() methode
.
| Technische details: | Support |
|---|---|
| Bubbel: | Kan annuleren: |
| Niet ondersteund: | FocusEvent |
| Ondersteunde HTML-tags: | Alle HTML-elementen, behalve: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title> |
| DOM version: | Level 2 Events |
Browser support
The numbers in the table indicate the first browser version that fully supports this event.
| Event | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | Support | Support | 52.0 | Support | Support |
Note:The onfocusout event may not work as expected in Chrome, Safari, and Opera 15+ using the JavaScript HTML DOM syntax. However, it should be used as an HTML attribute and with the addEventListener() method (see the syntax examples below).
More examples
Example 2
Use the "onfocusin" and "onfocusout" events together:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Example 3
Event delegation: set the useCapture parameter of addEventListener() to true (for focus and 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>
Example 4
Event delegation: using the 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>
