jQuery event.target Property

What Is event.target?

event.target is the DOM element that initiated the event — often a descendant of the element that registered the handler. Since jQuery 1.0. Compare with this to detect bubbling, and use it for event delegation. Contrast with currentTarget (handler element) and relatedTarget (other element on mouse enter/leave).

event.target          // Element that started the event
event.currentTarget   // Element whose handler is running
this                  // Usually === currentTarget

// Official pattern — log the tag name
$("body").on("click", function (event) {
  $("#log").html("clicked: " + event.target.nodeName);
});

How to Use event.target

Read it inside any handler to learn where the event started.

1. Bind with .on() on a parent or the element itself.
2. Inside the handler, read event.target (native Element).
3. Optionally wrap: $(event.target) for .is() / .closest().
4. Compare to this when you need “direct vs bubbled”.
5. Act only when the target matches the control you care about.

Pseudocode

parent.on("click", handler)

when click anywhere under parent:
    target = deepest element clicked
    currentTarget / this = parent (or matched delegate)

    if target === this:
        direct click on parent
    else:
        bubbled from a child (target)

    // Delegation: filter with $(target).is("li") or .closest(".tool")

Cheat Sheet

Keep these facts handy while reading event origins.

Live Preview

Click each block — the log shows event.target.nodeName, like the official demo.

Click span, strong, or paragraph.

jQuery Examples

Short labs — each has View Output, Try It Yourself, and How It Works.

$("body").on("click", function (event) {
  if ($(event.target).closest("#out").length) return;
  $("#out").text("clicked: " + event.target.nodeName);
});

Click span → clicked: SPAN
Click strong → clicked: STRONG
Click p → clicked: P

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

$("ul").first().on("click", handler).find("ul").hide();

Nested lists start hidden.
Click "item 1" → submenu appears.
Click again → submenu hides.

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

Click icon → target: SPAN | currentTarget: #save
Click button text → target: BUTTON | currentTarget: #save

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

Click panel background → Direct click on #panel
Click inner button → Bubbled from BUTTON

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

Click Bold or its "B" icon → Activated: bold
Click Save → Activated: save

Performance Notes

Reading target has no meaningful cost. Prefer one delegated parent handler that filters with .is() / .closest() over binding every child.

Key Takeaways