jQuery event.currentTarget Property

The jQuery event.currentTarget property is used to reference the DOM element where the event handler is directly attached. This property is particularly useful in event delegation.

When an event bubbles up from a descendant element (child element) to an ancestor element (parent element) where the handler is attached, the event.currentTarget helps identify the specific element that triggered the event within the ancestor's hierarchy.

Syntax

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

event.currentTarget

Parameters

This method does not accept any parameter.

Return Value

This property does not have any return value.

Example 1

The following is the basic example of the jQuery event.currentTarget property −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below element to identify it.</p>
    <p>Hello Tutorialspoint</p>
    <script>
        $('p').click(function(event){
            alert(event.currentTarget);
        });
    </script>
</body>
</html>

Output

The above program displayed a message when the user clicked on that a pop-up alert appeared with the name of the element on the browser screen −

When a user clicks on the displayed message −

Example 2

The following is another example of using the jQuery event.currentTarget property. We use this method to identify the DOM element and change its style color when it is clicked by the user −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below element to identify it.</p>
    <p>This is a paragraph</p>
    <h1>This is a heading</h1>
    <script>
        $('p, h1').click(function(event){
           $(event.currentTarget).css({"color": "white", "background-color":"green"});
        });
    </script>
</body>
</html>

Output

Once the above program is executed a paragraph and a heading are displayed, when the user clicks on it, the background changes to green −

Example 3

In the example below, we will use the jQuery event.currentTarget property to identify the current DOM element on which the event handler is attached and retrieve the text of that element using the text() method −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <p>Click on the below button to identify and retrieve its text.</p>
    <button>Click me</button>
    <span id = 'tag'></span>
    <span id = 'name'></span>
    <script>
        $('button').click(function(event){
            $('#tag').text("Tag Name: " + event.currentTarget.tagName);
            $('#name').text(", Button Name: " + $(event.currentTarget).text());
        })
    </script>
</body>
</html>

Output

After executing the above program, it displays a button; when the user clicks on it, the tag name and button text will be displayed as −

When a user clicks on the displayed button −

jquery_ref_events.htm

Print Page