Tutorialspoint.dev

jQuery | event.target Property with Example

The event.target is an inbuilt property in jQuery which is used to find which DOM element will start the event.
Syntax:

event.target

Parameter: It does not accept any parameter because it is a property not a function.
Return Value: It returns which DOM element triggered the event.

jQuery code to show the working of event.target Property property:

<html>
  
<head>
    <style>
        span,
        strong,
        p {
            padding: 8px;
            display: block;
            border: 2px solid green;
            width: 50%;
            margin: 10px;
        }
          
        #output {
            margin: 10px;
            padding: 10px;
            width: 100px;
            border: 2px solid green;
            display: block;
        }
    </style>
    </script>
</head>
  
<body>
    <div>
        <p>
            <strong><span>click Here !</span></strong>
        </p>
    </div>
    <!-- output will show inside this block -->
    <div id="output"></div>
    <!-- jQuery code to show working of this property -->
    <script>
        $("body").click(function(event) {
            $("#output").html("clicked: " + event.target.nodeName);
        });
    </script>
</body>
  
</html>

Output:
Before clicking anywhere-

After clicking inside of the p element-

After clicking inside of the STRONG element-

After clicking inside of the SPAN element-



This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter