jQuery event.currentTarget

What Is event.currentTarget?

event.currentTarget is the DOM element whose handler is running during the bubbling phase. Added in jQuery 1.3. It typically equals this in a normal .on() handler.

event.currentTarget  // Element — handler owner (usually === this)
event.target         // Element — where the event started
event.delegateTarget // Element — where .on() was attached

$("p").on("click", function (event) {
  event.currentTarget === this;  // true (official demo)
});

How to Use event.currentTarget

Read it inside any jQuery event handler to identify the listener element.

1. Bind with .on("click", handler) (or any event type).
2. Accept the event object: function (event) { … }.
3. Read event.currentTarget — wrap with $(event.currentTarget) if needed.
4. Compare with event.target when the click landed on a child.
5. For delegated binds, use event.delegateTarget for the attach parent.

Pseudocode

element.on("click", handler)

when click bubbles to element:
    event.currentTarget = element   // handler owner
    event.target = clickOrigin      // deepest node
    this = event.currentTarget      // normal .on() bind
    call handler(event)

// Delegation: .on("click", "li", fn)
//   currentTarget / this = matched li
//   delegateTarget = element where .on() was called

Cheat Sheet

Keep these facts handy while debugging event handlers.

Live Preview

Click the nested boxes. Compare currentTarget, target, and this — same idea as the official jQuery API demo.

Waiting for a click…

jQuery Examples

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

$("p").on("click", function (event) {
  $("#out").text(
    "event.currentTarget === this → " +
    (event.currentTarget === this)
  );
});

event.currentTarget === this → true

$("#btn").on("click", function (event) {
  $("#out").text(
    "currentTarget: " + event.currentTarget.id + "\\n" +
    "target: " + event.target.tagName
  );
});

currentTarget: btn
target: SPAN
(when you click the inner <span>)

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

currentTarget: LI
this text: Beta
delegateTarget: #list

var app = { name: "App" };

function onClick(event) {
  $("#out").text(
    "this.name: " + this.name + "\\n" +
    "currentTarget id: " + event.currentTarget.id + "\\n" +
    "same as this? " + (event.currentTarget === this)
  );
}

$("#btn").on("click", $.proxy(onClick, app));

this.name: App
currentTarget id: btn
same as this? false

$(".card").on("click", function (event) {
  $(".card").css("font-weight", "normal");
  $(event.currentTarget).css("font-weight", "bold");
  $("#out").text("Active: " + $(event.currentTarget).text());
});

Active: Card B
(clicked card is bold)

Performance Notes

Reading currentTarget has no meaningful cost. Prefer one delegated handler on a parent over binding every child when the list is large or dynamic.

Key Takeaways