jQuery event.target

What You’ll Learn

event.target is the DOM element that initiated the event — often a nested child when you click buttons with icons or list rows with links. This tutorial covers the official body click demo, ul delegation toggle, comparing with currentTarget, this, and relatedTarget, and the closest() toolbar pattern.

Introduction

Every jQuery handler receives an event object. Among its properties, event.target answers: which DOM element did the user actually interact with? That is not always the element you bound the handler to — nested markup means the target can be a child span, icon, or link while the handler runs on a parent.

jQuery has exposed event.target since version 1.0. The official docs note it can be the element that registered for the event or a descendant of it. Comparing event.target to this reveals whether the event is being handled due to bubbling — and the property is especially useful in event delegation when events bubble up to a single parent listener.

Understanding event.target

event.target points at the element where the browser fired the event — the deepest node in the interaction:

• Direct click — click a button with no nested elements → target equals the button.
• Nested click — click an icon inside the button → target is the icon; handler on the button still runs via bubbling.
• Delegation — one handler on ul → target is whatever was clicked; filter before acting.
• Fixed for the event — unlike currentTarget, target stays the same as the event bubbles through ancestors.

📝 Syntax

Official jQuery API form (since 1.0):

event.target

// read inside any .on() handler:
function handler( event ) {
  var el = event.target;
  $( "#log" ).html( "clicked: " + event.target.nodeName );
}

// compare to this — bubbling detection:
if ( event.target === this ) {
  // direct hit on bound element
}

Type

• Element — a native DOM element (wrap with $( event.target ) for jQuery methods).

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 examples

$( "body" ).on( "click", function ( event ) {
  $( "#log" ).html( "clicked: " + event.target.nodeName );
});

function handler( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.children().toggle();
  }
}
$( "ul" ).on( "click", handler ).find( "ul" ).hide();

Examples Gallery

Example 1 follows the official body click demo. Examples 2–5 cover ul delegation, target vs currentTarget, target vs this under delegation, and the toolbar closest() pattern.

$( "body" ).on( "click", function ( event ) {
  $( "#log" ).html( "clicked: " + event.target.nodeName );
});

Click span → #log shows "clicked: SPAN"
Click strong → "clicked: STRONG"
Click p → "clicked: P"
Handler is on body; target is the nested block you clicked

function handler( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.children().toggle();
  }
}
$( "ul" ).on( "click", handler ).find( "ul" ).hide();

Nested ul lists start hidden
Click an li row → its nested ul toggles open/closed
Click text inside li → target may be text node parent; .is("li") filters correctly when li is target

$( "#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; target shows the nested hit

$( "body" ).on( "click", "#panel", function ( event ) {
  if ( event.target === this ) {
    $( "#log" ).text( "Direct click on #panel" );
  } else {
    $( "#log" ).text(
      "Bubbled from " + event.target.tagName +
      " (target !== this)"
    );
  }
});

Click #panel background → "Direct click on #panel"
Click inner button → "Bubbled from BUTTON (target !== this)"
Official docs recommend this comparison for bubbling detection

$( "#toolbar" ).on( "click", ".tool", function ( event ) {
  var tool = $( event.target ).closest( ".tool" );
  $( "#status" ).text(
    "Activated: " + tool.data( "action" )
  );
});

Click icon inside .tool button → #status shows "Activated: bold" (or save, undo)
closest(".tool") finds the button even when target is nested <span class="icon">

🚀 Common Use Cases

• Event delegation — one parent handler filters $( event.target ) with .is() or .closest().
• Bubbling detection — event.target === this to ignore bubbled child clicks on container handlers.
• Nested buttons — icons inside buttons — read target, act on currentTarget or closest().
• Table row actions — detect which cell or link was clicked inside a delegated row handler.
• Ignore disabled regions — bail out when $( event.target ).closest( ".disabled" ).length.
• Debug logging — log event.target.nodeName during development to trace unexpected click origins.

📝 Notes

• Available since jQuery 1.0 — returns a native DOM Element.
• Can be the element that registered for the event or a descendant of it.
• Compare to this to determine if handling is due to event bubbling.
• Very useful in event delegation when events bubble to a parent listener.
• Do not confuse with event.currentTarget — target is origin; currentTarget is handler owner.
• Do not confuse with event.relatedTarget — that property applies to mouseover/mouseout transitions.
• Read-only — wrap with $( event.target ) for jQuery traversal methods.

💡 Best Practices