jQuery event.target Property

The jQuery event.target property is used to retrieve the DOM element that triggered the event. This can either be the element that is directly registered for the event or one of its children.

Syntax

Following is the syntax of the jQuery event.target property −

event.target

Parameters

This property does not accept any parameter.

Return Value

This property returns the DOM element that triggered the event.

Example 1

The following is the basic example of the jQuery event.target property.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below button</p>
    <button>Click me</button>
    <script>
        $('button').click(function(event){
           alert("Triggered by the " + event.target.tagName + " element");
        })
    </script>
</body>
</html>

Output

The above program displays a button. When clicked, the tag name of the element will be shown in a pop-up alert −

When button is clicked −

Example 2

Following is another example of the jQuery event.target property. We use this property to retrieve the DOM element that triggered the event.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div, p, span{
            padding: 8px;
            display: block;
            border: 1px solid #999;
        } 
    </style>
</head>
<body>
    <div class="res"></div>
    <div>
        <p>
            <span>Click</span>
        </p>
    </div>
    <script>
        $('body').on("click", function(event){
           $('.res').text("Triggered by the " + event.target.nodeName);
        })
    </script>
</body>
</html>

Output

After executing the above program, an interface similar to event bubbling is displayed. When users click on any element, the tag name of that element will be shown within another div −

Example 3

In the example below, we use the event.target property to retrieve the multiple DOM elements on which that event was triggered −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        p, h1, div, button{
            font-size: 20px;
            display: block;
            padding: 10px 0px;
        }
        span{
            color: green;
            padding: 10px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>Click on any element</p>
    <h1>This is heading</h1>
    <div>This is div element</div>
    <button>Click me!</button>
    <span></span>
    <script>
        $('p, h1, div, button').click(function(event){
           $('span').text("Triggered by the " + event.target.tagName + " element");
        })
    </script>
</body>
</html>

Output

When the program is executed, it displays a <p>, <h1>, <div>, and a <button> element. When users click on any of these elements, the event triggered by the tag name will be displayed −

jquery_ref_events.htm

Print Page