HTML | DOM FocusEvent

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

  • Focusing on the second textarea:
    relatedTarget-before
  • Refocusing the first textarea:
    relatedTarget-after

Event Types:



  • onblur: This event fires whenever an element gets focus.
  • onfocus: This event fires whenever an event loses 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 recieve focus.
    </p>
      
    <textarea id="text1" onfocusin="fireEvent()">
    </textarea>
      
    <script>
        function fireEvent() {
            console.log("The textarea was focused.");
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the textarea:
    focusin-before
  • After clicking on the textarea:
    focusin-after

Example: This example implements the onfocusout event.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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
  • Firefox 24
  • Internet Explorer 9
  • Safari
  • Opera

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.