HTML DOM onfocusout Event

Last Updated : 22 Jun, 2023

The HTML DOM onfocusout event occurs when an element is losing focus. The onfocusout is the same as onblur, the only difference is that the onblur event does not bubble. If you want to determine whether an element or its child loses focus, use the onfocusout event. The onfocusin event is the opposite of the onfocusout event.

Note: Firefox does not support the onfocusout event but with the help of capturing listeners you can find out whether a child of an element loses the focus.

Supported Tags: It supports ALL HTML elements, EXCEPT:

<base>
<bdo>
<br>
<head>
<html>
<iframe>
<meta>
<param>
<script>
<style>
<title>

Syntax:

In HTML:

<element onfocusout="myScript">

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

object.onfocusout = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("focusout", myScript);

Example: Using HTML

HTML

<!DOCTYPE html>
<html>

<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>
              HTML DOM onfocusout event 
          </h2> 
        Email:
        <input type="email" id="email" 
               onfocusout="gfgFun()">

        <script>
            function gfgFun() {
                let x = 
                    document.getElementById("email");
                alert("Focus out");
            }
        </script>
    </center>
</body>

</html>

Output:

Example: Using JavaScript

HTML

<!DOCTYPE html>
<html>

<body>

    <center>
        <h1 style="color:green">
              GeeksforGeeks
          </h1>
        <h2>
              HTML DOM onfocusout event 
          </h2> 
        Email:
        <input type="email" id="email">

        <script>
            document.getElementById(
                "email").onfocusout = 
                function () {
                    gfgFun()
                };

            function gfgFun() {
                alert("Focus out");
            }
        </script>
    </center>
</body>

</html>

Output:

Example: Using the addEventListener() method:

HTML

<!DOCTYPE html>
<html>

<body>
    <center>
        <h1 style="color:green">
              GeeksforGeeks
          </h1>
        <h2>
              HTML DOM onfocusout event
          </h2>
        Email: 
        <input type="email" id="email">

        <script>
            document.getElementById(
                "email").addEventListener(
                "focusout", gfgFun);

            function gfgFun() {
                alert("Input field lost focus.");
            }
        </script>
    </center>
</body>

</html>