onfocusout-tapahtuma

DOM tapahtumat FocusEvent

Määritelmä ja käyttö

onfocusout-tapahtuma tapahtuu, kun elementti on menossa menettämään fokuksen.

Vaikka Firefox ei tue onfocusout-tapahtumaa, voit tarkistaa elementin lapsenmenetysfokuksen käyttämällä onblur-tapahtuman napautustunnistinta (käyttämällä addEventListener() -menetelmän valinnaisia useCapture-argumentteja). onfocusout-tapahtuma on samanlainen kuin onblur tapahtumaPääasiallinen ero on, että onblur-tapahtuma ei puhkea. Siksi, jos haluat tarkistaa, menettääkö elementti tai sen lapsi fokuksen, käytä onfocusout-tapahtumaa.

Vaikka Firefox ei tue onfocusout-tapahtumaa, voit tarkistaa elementin lapsenmenetysfokuksen käyttämällä onblur-tapahtuman napautustunnistinta (käyttämällä addEventListener() -menetelmän valinnaisia useCapture-argumentteja)..

Vaikka Firefox ei tue onfocusout-tapahtumaa, voit tarkistaa elementin lapsenmenetysfokuksen käyttämällä onblur-tapahtuman napautustunnistinta (käyttämällä addEventListener() -menetelmän valinnaisia useCapture-argumentteja). Vinkki: onfocusin tapahtumaonfocusout-tapahtuma on samanlainen kuin

Päinvastoin.

Esimerkki

Esimerkki 1

Suorita JavaScript, kun syötteen kenttä on menossa menettämään fokuksen:

Kokeile itse

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

Sivun alaosassa on lisää TIY-esimerkkejä.

Syntaksi

HTML:ssä:< elementti.addEventListener("focusout",onfocusout="

Kokeile itse

">

JavaScriptissa käytetään addEventListener() -menetelmää:JavaScriptissa (saattaa ei toimia odotetusti Chrome, Safari ja Opera 15+):.addEventListener("focusout",.onfocusout = function(){

Kokeile itse

};

JavaScriptissa käytetään addEventListener() -menetelmää:objekti .addEventListener("focusout",myScript

Kokeile itse

Note:); Internet Explorer 8 tai aikaisemmat versiot eivät tueaddEventListener()-menetelmä

.

Tekninen yksityiskohta Support
Puhkeaa: Voit peruuttaa:
Ei tuettu FocusEvent
Tuetut HTML-merkit: Kaikki HTML-elementit, paitsi: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> ja <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+ 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()">

Kokeile itse

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>

Kokeile itse

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>

Kokeile itse

DOM tapahtumat FocusEvent