HTML | DOM FocusEvent

Last Updated : 11 Jul, 2022

The DOM FocusEvent Object contains the events that are related to focus. It includes events like focus in, focus out and blur.

Properties:

relatedTarget: It returns the element related to the element that triggered a focus or blur event. This value is by default set to null due to security reasons. It is a read-only property.

Example: Finding out related event with the relatedTarget property.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>DOM FocusEvent</title>
</head>
 
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
 
    <b>DOM FocusEvent</b>
     
<p>
        The relatedTarget property will 
        return the element that will
        return the secondary target.
    </p>
 
     
     
<p>Textarea with id of "text1"</p>
 
     
    <textarea id="text1"
        onfocus="getRelatedTarget()">
    </textarea>
     
     
<p>Textarea with id of "text2"</p>
 
     
    <textarea id="text2"></textarea>
     
    <script>
        function getRelatedTarget() {
            console.log(this.event.relatedTarget);
        }
    </script>
</body>
 
</html>

Output:

Focusing on the second textarea:

relatedTarget-before

Refocusing the first textarea:

relatedTarget-after

Event Types:

onblur: This event fires whenever an element loses its focus.
onfocus: This event fires whenever an element gets focus.
onfocusin: This event fires whenever an event is about to get focus.
onfocusout: This event fires whenever an event is about to lose focus.

Example: This example implements the onfocusin event.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>DOM FocusEvent</title>
</head>
 
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
 
    <b>DOM FocusEvent</b>
     
     
<p>
        The onfocusin event fires whenever an
        element is about to receive focus.
    </p>
 
     
    <textarea id="text1" onfocusin="fireEvent()">
    </textarea>
     
    <script>
        function fireEvent() {
            console.log("The textarea was focused.");
        }
    </script>
</body>
 
</html>

Output:

Before clicking on the textarea:

focusin-before

After clicking on the textarea:

focusin-after

Example: This example implements the onfocusout event.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>DOM FocusEvent</title>
</head>
 
<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
 
    <b>DOM FocusEvent</b>
     
     
<p>
        The onfocusout event fires whenever an
        element is about to lose focus.
    </p>
 
     
    <textarea id="text1" onfocusout="fireEvent()">
    </textarea>
     
    <script>
        function fireEvent() {
            console.log("The textarea was unfocused.");
        }
    </script>
</body>
 
</html>