jQuery event.currentTarget

What You’ll Learn

event.currentTarget is the DOM element whose handler is running during the bubbling phase. This tutorial covers the official equals-this demo, comparison with event.target, delegation on parent lists, jQuery.proxy scope, and styling the handler owner safely.

Introduction

Every time you bind .on("click", function (event) { ... }), jQuery passes an event object. Among its properties, event.currentTarget answers a precise question: which element’s listener is executing right now? That matters when buttons contain icons, lists use delegation, or you wrap handlers with custom scope.

The official jQuery API documents event.currentTarget since version 1.3. In the common case it equals this inside the handler. When you use jQuery.proxy or other scope manipulation, this follows your chosen context — but event.currentTarget always points at the element running the handler.

Understanding event.currentTarget

During event bubbling, the browser invokes handlers from the target element up through ancestors. At each step, event.currentTarget is set to the element whose listener is running:

• Direct binding — $("#btn").on("click", fn) → currentTarget is #btn.
• Delegation — $("#list").on("click", "li", fn) → currentTarget is #list; this is the matched li.
• Bubbling chain — each ancestor handler sees itself as currentTarget.
• vs target — event.target stays the deepest origin element for every handler on the path.

📝 Syntax

Official jQuery API form (since 1.3):

event.currentTarget

// read inside any .on() handler:
function handler( event ) {
  var el = event.currentTarget;
  $( event.currentTarget ).addClass( "active" );
}

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

Type

• Element — a native DOM element (same type as this in a normal handler).

Return value

• Not a method — a read-only property on the event object passed to your handler.
• Always defined when jQuery invokes your callback for a DOM event.

Official jQuery API example

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

Examples Gallery

Example 1 follows the official jQuery demo. Examples 2–5 cover delegation, target vs currentTarget, jQuery.proxy, and highlighting the handler element during bubbling.

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

Click a paragraph → alert shows "true"
event.currentTarget and this refer to the same <p> element

$( "#list" ).on( "click", "li", function ( event ) {
  console.log( "currentTarget id:", event.currentTarget.id ); // "list"
  console.log( "this tag:", this.tagName );                   // "LI"
});

currentTarget id: list
this tag: LI
Use $(this) to style the row; currentTarget is the ul#list

$( "#save" ).on( "click", function ( event ) {
  console.log( "target:", event.target.tagName );           // "SPAN"
  console.log( "currentTarget:", event.currentTarget.id );  // "save"
});

target: SPAN (the icon you clicked)
currentTarget: save (the button handler owner)
Use currentTarget to style the whole button reliably

var app = { name: "MyApp" };

$( "button" ).on( "click", $.proxy( function ( event ) {
  console.log( "this.name:", this.name );                         // "MyApp"
  console.log( "currentTarget:", event.currentTarget.tagName );     // "BUTTON"
  console.log( "equal?", event.currentTarget === this );           // false
}, app ) );

this.name: MyApp
currentTarget: BUTTON
equal? false
Use event.currentTarget when this is not the clicked element

$( "#outer, #inner" ).on( "click", function ( event ) {
  console.log(
    event.currentTarget.id,
    "target=" + event.target.id
  );
});
// click #inner → logs "inner target=inner" then "outer target=inner"

inner target=inner   (inner handler runs first)
outer target=inner   (bubble reaches outer; target unchanged)

🚀 Common Use Cases

• Highlight handler owner — $(event.currentTarget).addClass("active") when nested children should not break styling.
• Delegation debugging — log currentTarget vs this to verify parent vs row behavior.
• Proxy-safe handlers — read the clicked element via event.currentTarget when this is an app object.
• Stop propagation decisions — know which listener runs before calling event.stopPropagation().
• Compare with target — ignore clicks on disabled inner nodes with event.target === event.currentTarget.
• Unit tests — assert handler context without relying on mutable this binding.

📝 Notes

• Available since jQuery 1.3 — mirrors the native DOM Event.currentTarget property.
• Typically equals this unless scope is manipulated with jQuery.proxy or similar.
• With delegation, currentTarget is the delegated parent; this is the matched child selector.
• Do not confuse with event.target — target is the origin; currentTarget is the listener owner.
• Read-only — assign to a variable if you need the element after async code runs.
• Works with all event types bound through jQuery — not limited to mouse events.

💡 Best Practices