jQuery event.delegateTarget

What Is event.delegateTarget?

event.delegateTarget is the DOM element where the handler was attached. Most useful with delegated .on("click", "button", fn) — it names the ancestor, not the matched child. Added in jQuery 1.7.

event.delegateTarget  // Element — where .on() was called
event.currentTarget   // Element — usually === this (matched / handler element)
event.target          // Element — deepest click origin

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

// Direct bind (no selector):
//   delegateTarget === currentTarget

How to Use event.delegateTarget

Bind on a parent, match children, then read the attach point from the event.

1. Choose a stable parent ($(".box"), $("#list"), …).
2. Bind with a selector: .on("click", "button", handler).
3. Inside the handler, use this for the matched child.
4. Use event.delegateTarget when you need the parent container.
5. Wrap with $(event.delegateTarget) before calling jQuery methods.

Pseudocode

parent.on("click", "childSelector", handler)

when click happens on a matching child (or inside it):
    this / currentTarget     = matched child
    event.delegateTarget     = parent   // attach point
    event.target             = deepest origin
    call handler(event)

// Direct bind (no selector):
parent.on("click", handler)
    delegateTarget === currentTarget === parent

Cheat Sheet

Keep these facts handy while debugging delegated handlers.

Live Preview

Click a button inside either box. The log shows this vs delegateTarget — same idea as the official jQuery API demo.

Waiting — click a button inside a box.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

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

Click button in a .box → that box turns red
(other boxes stay unchanged)

$("#list").on("click", "li", function (event) {
  $("#out").text(
    "this: " + this.tagName + " (" + $(this).text() + ")\\n" +
    "currentTarget: " + event.currentTarget.tagName + "\\n" +
    "delegateTarget: #" + event.delegateTarget.id
  );
});

this: LI (Beta)
currentTarget: LI
delegateTarget: #list

$("#btn").on("click", function (event) {
  $("#out").text(
    "same? " +
    (event.delegateTarget === event.currentTarget) +
    "\\nid: " + event.delegateTarget.id
  );
});

same? true
id: btn

$("#panel").on("click", "button.act", function (event) {
  $("#out").text("Clicked: " + $(this).text());
  if ($(this).data("once")) {
    $(event.delegateTarget).off("click", "button.act");
    $("#out").append("\\nHandlers removed from #" + event.delegateTarget.id);
  }
});

Clicked: Done
Handlers removed from #panel

function onBtn(event) {
  $("#out").text(
    "Button in #" + event.delegateTarget.id +
    " → " + $(this).text()
  );
}

$(".card").on("click", "button", onBtn);

Button in #card-2 → Open

Performance Notes

Reading delegateTarget has no meaningful cost. Delegation itself is the win — one listener on a parent instead of one per child.

Key Takeaways