Skip to content
Related Articles
Open in App
Not now

Related Articles

jQuery event.target Property

Improve Article
Save Article
  • Last Updated : 18 Nov, 2022
Improve Article
Save Article

The jQuery event.target is an inbuilt property 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. 

Example 1: This example shows the working of event.target Property.

HTML




<!DOCTYPE html>
<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: 

 

Example 2: In this example, a pop-up will come when any DOM element is clicked.

HTML




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

Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!