Open In App

HTML | DOM FocusEvent

Last Updated : 11 Jul, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

  • Before clicking out of the textarea:

 focusout-before

  • After clicking out of the textarea:

 focusout-after

Supported Browsers: The browser supported by FocusEvent Object are listed below:

  • Chrome 26
  • Edge 12
  • Firefox 24
  • Internet Explorer 9
  • Safari 7
  • Opera 15


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads