JavaScript & jQuery Tutorials

JQ Home Right Arrow Objects Right Arrow event.delegateTarget

event.delegateTarget

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


Signature Description
event.delegateTargetThe value of the element that the in progress jQuery event handler was attached to.

Parameters

None.

Return

A DOM element.


event.delegateTarget Example go to Objects Objects   go to top of page 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);
  });
});


Press the button below to action the above code:

               


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



Related Tutorials

jQuery Advanced Tutorials - Lesson 5 - The Event Object



 

go to jQuery home page jQ Home go to Objects Objects go to top of page Top