event.delegateTarget JQ Home  <<  Objects  <<  event.delegateTarget

• <<    event.data
• event.namespace     >>

Event attached delegation property.

Description

The event.delegateTarget Event object property, contains the value of the element that the in progress jQuery event handler was attached to.

• Useful for delegated Events attached by using the .on(), .one(), or prior to jQuery version 1.7, the .delegate() methods, where the event handler was attached at an ancestor of the element being processed. An example of usage would be to identify and remove event handlers at the attachment (delegation) point.
• For directly-bound Events the event.delegateTarget Event object property will always equal the event.currentTarget Event object property.
• See the description for the .on() method for details of jQuery eventing.

Syntax

Parameters

None.

Return

A DOM element.

event.delegateTarget Example Objects  <<  Top

Contains the value of the element that the in progress jQuery event handler was attached to.

In the example below when we press the left button we see a difference between our current target (the button) and the delegated target (the ancestor form).

When we press the right button the current target (the button) and the delegated target (the same button) are equal as the event was directly bound to the button and no delegation occurred.

$(function(){
  $('form').one('click', '#btn3', function(event){
     $('#scrollspan3').append('*** Delegated event. Current target: ' + event.currentTarget 
                          + '. Delegated target: ' + event.delegateTarget);
  });

  $('#btn4').one('click', function(event){
     $('#scrollspan3').append('*** Directly bound event. Current target: ' + event.currentTarget 
                          + '. Delegated target: ' + event.delegateTarget);
  });
});

We will show a message here for the mouse button press.

Related Tutorials

jQuery Advanced Tutorials - Lesson 5 - The Event Object

• <<    event.data
• event.namespace     >>