onfocusout-incidenten

DOM-händelser FocusEvent

Definition och användning

onfocusout-incidenten inträffar när ett element håller på att förlora fokus.

Trots att Firefox inte stöder onfocusout-incidenten kan du förstå om en elements underelement förlorar fokus genom att använda en catch-listener för onblur-incidenten (med valfri useCapture-parametern för addEventListener() metoden). onfocusout-incidenten liknar onblur-händelseDen främsta skillnaden är att onblur-incidenten inte bubblar. Därför, om du vill hitta om ett element eller dess underelement förlorar fokus, bör du använda onfocusout-incidenten.

Trots att Firefox inte stöder onfocusout-incidenten kan du förstå om en elements underelement förlorar fokus genom att använda en catch-listener för onblur-incidenten (med valfri useCapture-parametern för addEventListener() metoden)..

Trots att Firefox inte stöder onfocusout-incidenten kan du förstå om en elements underelement förlorar fokus genom att använda en catch-listener för onblur-incidenten (med valfri useCapture-parametern för addEventListener() metoden). Tips: onfocusin-händelseonfocusout-incidenten med

Motstånd

Exempel

Exempel 1

Kör JavaScript när inmatningsfältet håller på att förlora fokus:

Prova själv

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

På sidan nedan finns fler TIY-exempel.

Syntaks

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

Prova själv

">

I JavaScript, använd addEventListener() metoden:I JavaScript (kan inte förväntas fungera som förväntat i Chrome, Safari och Opera 15+):.addEventListener("focusout",.onfocusout = function(){

Prova själv

};

I JavaScript, använd addEventListener() metoden:object .addEventListener("focusout",myScript

Prova själv

Note:); Internet Explorer 8 eller tidigare versioner stöder inteaddEventListener() metoden

.

Tekniska detaljer: Support
Bubbling: Kan avbrytas:
Inte stödd: FocusEvent
Stödda HTML-taggar: Alla HTML-element, utom: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> samt <title>
DOM version: Level 2 Events

Browser support

The numbers in the table indicate the first browser version that fully supports the 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+ when using 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()">

Prova själv

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>

Prova själv

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>

Prova själv

DOM-händelser FocusEvent