jQuery event.delegateTarget Property

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

event.delegateTarget 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.delegateTarget Property.

The event.delegateTarget is a built-in property in jQuery. This property helps us to get the element to which the event handler has been attached currently. The event.delegateTarget works the same as the event.CurrentTarget is when the event is directly bound to the element.

event.delegateTarget Property Syntax

event.delegateTarget

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 even.delegateTarget property is triggered when the elements are clicked.

jQuery event.delegateTarget 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 - Delegate Target</h2>
    <div>Click on the following sentences to implement the event.delegateTarget property of jQuery.</div>
    <hr>
    <p>Welcome to Include Help</p>
    <p>This is jQuery tutorial for events.</p>
    <p>Thanks for visiting</p>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(event){
        $('p').on('click',function(event){
            $(event.delegateTarget).css('background-color','#EEF29E');
        });
    });
  </script>
</html>

Output:

Example 1: jQuery event.delegateTarget Property

jQuery event.data Property

jQuery event.currentTarget Property

Comments and Discussions!

Load comments ↻