onfocusoutEvent
Event ObjectExamples
Execute JavaScript when the input field is about to lose focus:
Try it Yourself »
More examples are included at the bottom of this chapter.
Definition and Usage
The onfocusout event fires when an element is about to lose focus.
Tip:The onfocusout event is similar toonblurthe event. The main difference is that the onblur event does not support bubbling. Therefore, if you need to check whether an element or its child element loses focus, you need to use the onfocusout event.
Tip:Although Firefox does not support the onfocusout event, you can useonfocus(the optional parameter of the addEventListener() methoduseCapture) capture listener event to check whether an element or its child element has lost focus.
Tip:The opposite event of the onfocusout event isonfocusinthe event.
Browser Support
| Event | |||||
|---|---|---|---|---|---|
| onfocusout | Yes | Yes | Yes | Yes | Yes |
Note:Using the onfocusin event with HTML DOM syntax in Chrome, Safari, and Opera 15+ browsers may not work properly. However, as an HTML element, it can work properly by using the addEventListener() method.
Syntax
In HTML:
In JavaScript (may not work properly in Chrome, Safari, and Opera 15+):
In JavaScript, using the addEventListener() method:
Note:Internet Explorer 8 and earlier IE versions do not supportaddEventListener()the method.
Technical Details
| Bubbles: | Yes |
|---|---|
| Cancelable: | No |
| Event type: | FocusEvent |
| Supported HTML tags: | All HTML elements, except: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
More Examples
Example
Using the "onfocusin" and "onfocusout" events:
Try it Yourself »
Example
Event delegation: set addEventListener()'suseCaptureparameter to true (for gaining and losing focus):
<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>
Try it Yourself »
Example
Event delegation: using the focusout event (not supported in Firefox):
<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>
Try it Yourself »
Other Extensions