jQuery event.delegateTarget property

jQuery Events

The event.delegateTarget property returns the element added by the current jQuery event handler.

This property is inon()The most useful method for attaching delegated events, which attaches the event handler to the ancestor element to be processed. For example, it can be used to identify and remove event handlers at the delegation point.

Note:If the event is directly bound to the element and no delegation has occurred, then event.delegateTarget equalsevent.currentTarget（See the example below for details）.

Syntax:

event.delegateTarget

Example

When a button in any DIV is clicked, change the background color of the DIV to red:

$("div").on("click", "button", function(event){
　　$$(event.delegateTarget).css("background"-color", "red");
});

Show the difference between delegateTarget and currentTarget when delegation occurs:

$("body").on("click",　"button",　function(event){
　　let　dt　=　event.delegateTarget;
　　let　ct　=　event.currentTarget;
　　$("p").html("delegateTarget:　"　+　dt.nodeName　+　"<br>currentTarget:　"　+　ct.nodeName);
});

Show that for events directly bound, delegateTarget and currentTarget are equal:

$("button").on("click",　function(event){
　　let　dt　=　event.delegateTarget;
　　let　ct　=　event.currentTarget;
　　$("p").html("delegateTarget:　"　+　dt.nodeName　+　"<br>currentTarget:　"　+　ct.nodeName);
});

Parameter Value

jQuery Events