JavaScript onfocusout Event

February 8, 2021 10:45 am IST

You are Here:

JavaScript onfocusout Event

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

Note: Unlike onblur event, the onfocusout event will bubble, i.e., The element with onfocusout event will be affected when its child element loses its focus.

onfocusout Event as Attribute

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Type your Name and blur the input field.</p> <input type="text" onfocusout="myFunction(this)"> <script> function myFunction(x){ x.style.color = "red"; } </script> </body> </html>

Run

Syntax

As Attribute

Using Event Listener

object.addEventListener("focusout" , myScript);

Using addEventListener() Method

Note: The addEventListener() method is not supported in Internet Explorer 8 and below.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Type your Name and Blur the input field</p> <input type="text"> <script> var x = document.getElementsByTagName("input")[0]; function myFunction() { x.style.color = "red"; } x.addEventListener("focusout", myFunction); </script> </body> </html>

Run