jQuery event.currentTarget Property

jQuery | event.currentTarget Property: Learn about the jQuery event.currentTarget Property with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 27, 2022

event.currentTarget Property

An event is an action occurred by the user. Therefore, many functions and methods can be set according to those actions performed. When these actions are defined for an event interface, we term those as the event properties. There are various predefined event properties in jQuery. Here, let's discuss the event.currentTarget Property.

The event.currentTarget is a built-in property in jQuery. It helps to return the current DOM element within the event bubbling phase. This property helps to get the current element therefore, this is an important jQuery property that helps when similar event handlers have to be added to various other elements.

The event.currentTarget is generally said to be equal to 'this', i.e., the current selector.

event.currentTarget Property Syntax

event.currentTarget

This property takes in one required parameter – event. This event parameter is the one specified in the binding function. The below example shows how the event.currentTarget property is triggered when the elements are clicked.

jQuery event.currentTarget Property Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Event Property - Current Target</h2>
    <p>Click on the following sentences to implement the .eventcurrenttarget() property of jQeury.</p>
    <hr>
    <h2>Welcome to Include Help</h2>
    <p>This is a tutorial for jQuery events.</p>
    <h4>Thanks for visiting</h4>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(event){
        $('h2, p, h4').on('click',function(event){
            if (event.currentTarget === this){
                $('h3').html("Element Clicked");
            }
        }) ;
    });
  </script>
</html>

Output:

Example 1: jQuery event.currentTarget Property

jQuery event.delegateTarget Property

jQuery event.pageX Property

Comments and Discussions!

Load comments ↻