jQuery event.delegateTarget

What You’ll Learn

event.delegateTarget is the element where a jQuery handler was attached — especially the delegation parent in .on("click", "button", fn). This tutorial covers the official .box demo, comparison with this and event.currentTarget, multiple containers, and identifying bind points for .off().

Introduction

Event delegation attaches one listener on a parent and filters events from children. When a nested button fires, you often need two elements: the clicked button (this) and the container you bound to (event.delegateTarget).

jQuery added event.delegateTarget in version 1.7 alongside unified .on() delegation. The official demo styles the entire .box red when any inner button is clicked — by targeting event.delegateTarget, not this.

Understanding event.delegateTarget

event.delegateTarget answers: where was this jQuery handler attached?

• Delegated bind — $(".box").on("click", "button", fn) → delegateTarget is the .box element.
• Matched child — this inside fn is the button that was clicked.
• Direct bind — $("#btn").on("click", fn) → delegateTarget === currentTarget.
• Cleanup — identify the delegation root when calling .off("click", "button", fn) on the correct parent.

📝 Syntax

Read inside any jQuery handler (since 1.7):

event.delegateTarget

// delegated handler:
$( ".box" ).on( "click", "button", function ( event ) {
  $( event.delegateTarget ).css( "background-color", "red" );
  $( this ).addClass( "was-clicked" ); // the button
});

// direct handler — equals currentTarget:
$( "#solo" ).on( "click", function ( event ) {
  console.log( event.delegateTarget === event.currentTarget ); // true
});

Type

• Element — native DOM element where the handler was attached.

Return value

• Read-only property on the jQuery event object for the current handler invocation.

Official jQuery API example

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

Examples Gallery

Example 1 follows the official jQuery demo. Examples 2–5 compare references, direct bindings, multiple boxes, and using the delegation root for cleanup.

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

Click button inside any .box → entire box background turns red
this would only style the button — delegateTarget styles the container

$( "#panel" ).on( "click", "button", function ( event ) {
  console.log( "delegateTarget:", event.delegateTarget.id ); // "panel"
  console.log( "this:", this.tagName );                       // "BUTTON"
});

delegateTarget: panel
this: BUTTON

$( "#solo" ).on( "click", function ( event ) {
  console.log( event.delegateTarget === event.currentTarget ); // true
  console.log( event.delegateTarget === this );                // true
});

true
true

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

Click button in box A → only box A turns red
Click button in box B → only box B turns red

function onBoxClick( event ) {
  if ( event.data && event.data.once ) {
    $( event.delegateTarget ).off( "click", "button", onBoxClick );
  }
  $( event.delegateTarget ).css( "background-color", "red" );
}
$( ".box" ).on( "click", "button", { once: true }, onBoxClick );

First button click → box turns red, handler removed from that box
Second click on same box → no further highlight (handler gone)

🚀 Common Use Cases

• Highlight container — official .box background on inner button click.
• Dynamic lists — one #list delegate; style delegateTarget on bulk actions.
• Accordion panels — expand the panel (delegateTarget) when any header inside fires.
• Teardown — .off() on the correct parent using event.delegateTarget.
• Debug delegation — log delegateTarget vs this to verify bind points.
• Nested delegates — know which ancestor owned the handler that ran.

📝 Notes

• Available since jQuery 1.7 — added with unified .on() delegation.
• Most useful for delegated handlers from .on() or legacy .delegate().
• Non-delegated: delegateTarget === currentTarget (official docs).
• Not the same as this under delegation — this is the matched child.
• jQuery-specific property — not a standard DOM Event field name in all browsers without jQuery.
• Pair with event.currentTarget and event.data for full handler context.

💡 Best Practices