onfocusout event

DOM Events FocusEvent

Definition and usage

The onfocusout event occurs when an element is about to lose focus.

Tip: The onfocusout event is similar to onblur Event.The main difference is that the onblur event does not bubble. Therefore, if you want to find out whether an element or its child element loses focus, you should use the onfocusout event.

Tip:Although Firefox does not support the onfocusout event, you can understand whether the child elements of an element lose focus by using the capture listener of the onblur event (using the optional useCapture parameter of the addEventListener() method).

Tip: The onfocusout event is with onfocusin EventOn the contrary.

Instance

Example 1

Execute JavaScript when the input field is about to lose focus:

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

Try It Yourself

More TIY examples are available at the bottom of the page.

Syntax

In HTML:

<element onfocusout="myScript">

Try It Yourself

In JavaScript (may not work as expected in Chrome, Safari, and Opera 15+):

object.onfocusout = function(){myScript};

Try It Yourself

In JavaScript, use the addEventListener() method:

object.addEventListener("focusout", myScript);

Try It Yourself

Note:Internet Explorer 8 or earlier versions do not support addEventListener() method.

Technical details

Bubbling: Supports
Cancelable: Not supported
Event types: FocusEvent
Supported HTML tags: All HTML elements except: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> and <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 Supports Supports 52.0 Supports Supports

Note:The onfocusout event may not work as expected in Chrome, Safari, and Opera 15+ when 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()">

Try It Yourself

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>

Try It Yourself

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>

Try It Yourself

DOM Events FocusEvent