onfocusout-begivenheden

DOM begivenheder FocusEvent

Definition og brug

onfocusout-begivenheden opstår, når elementet er ved at miste fokus.

Selvom Firefox ikke understøtter onfocusout-begivenheden, kan du finde ud af, om elementets underelementer mister fokus, ved at bruge en capture-lytter til onblur-begivenheden (med valgfri useCapture parameter for addEventListener() metoden). onfocusout-begivenheden ligner onblur begivenhedDen vigtigste forskel er, at onblur-begivenheden ikke bobler. Derfor skal du bruge onfocusout-begivenheden, hvis du vil finde ud af, om elementet eller dens underelementer mister fokus.

Selvom Firefox ikke understøtter onfocusout-begivenheden, kan du finde ud af, om elementets underelementer mister fokus, ved at bruge en capture-lytter til onblur-begivenheden (med valgfri useCapture parameter for addEventListener() metoden)..

Selvom Firefox ikke understøtter onfocusout-begivenheden, kan du finde ud af, om elementets underelementer mister fokus, ved at bruge en capture-lytter til onblur-begivenheden (med valgfri useCapture parameter for addEventListener() metoden). Bemærk: onfocusin begivenhedonfocusout-begivenheden med

Modsat.

Eksempel

Eksempel 1

Udfør JavaScript, når inputfeltet er ved at miste fokus:

Prøv det selv

<input type="text" onfocusout="myFunction()">

Der er flere TIY-exempler nedenfor på siden.

Syntaks

I HTML:< element.addEventListener("focusout",onfocusout="

Prøv det selv

">

I JavaScript, brug af addEventListener() metoden:I JavaScript (kan ikke forventes at fungere som forventet i Chrome, Safari og Opera 15+):.addEventListener("focusout",.onfocusout = function(){

Prøv det selv

};

I JavaScript, brug af addEventListener() metoden:object .addEventListener("focusout",myScript

Prøv det selv

Bemærk:); Internet Explorer 8 eller tidligere versioner understøtter ikkeaddEventListener() metoden

.

Tekniske detaljer Understøttelse
Bobling: Kan annulleres:
Ikke understøttet FocusEvent
Understøttede HTML-mærker: Alle HTML-elementer, med undtag: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> og <title>
DOM version: Level 2 Events

Browser understøttelse

Tal i tabellen angiver den første browserversion, der fuldt ud understøtter dette event.

Event Chrome IE Firefox Safari Opera
onfocusout Understøttelse Understøttelse 52.0 Understøttelse Understøttelse

Bemærk:onfocusout-hændelsen kan muligvis ikke fungere som forventet i Chrome, Safari og Opera 15+ ved brug af JavaScript HTML DOM-syntaks. Men den bør bruges som HTML-attribut og med addEventListener()-metoden (se nedenstående syntaks eksempel).

Flere eksempler

Eksempel 2

Brug af "onfocusin" og "onfocusout"-hændelser sammen:

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Prøv det selv

Eksempel 3

Event delegation: sæt addEventListener()'s useCapture parameter til true (brugt til focus og 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>

Prøv det selv

Eksempel 4

Event delegation: brug af focusin-hændelse:

<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>

Prøv det selv

DOM begivenheder FocusEvent