Difference Between event.target and event.currentTarget in JavaScript

In JavaScript when working with events, properties event.target and event.currentTarget are often used. Despite similarity, they have different purposes and can return different elements.

Definitions

• event.target — element where the event actually occurred. This can be a nested element.
• event.currentTarget — element where the event handler is attached (the one you attached addEventListener to).

Example

<div id="parent">
  <button id="child">Click me</button>
</div>

const parent = document.getElementById("parent");

parent.addEventListener("click", function (event) {
  console.log("target:", event.target);
  console.log("currentTarget:", event.currentTarget);
});

If you click button #child, then:

• event.target will be <button id="child">
• event.currentTarget will be <div id="parent">

Because the event occurred on the button, but the handler is attached to the parent (parent).

When is it Used?

• event.target — useful when you're doing event delegation and want to determine which element the event happened on.
• event.currentTarget — convenient to use when you want to get the element that has the handler attached, especially inside a universal handler.

Useful Delegation Example

document.querySelector("#list").addEventListener("click", function (e) {
  if (e.target.tagName === "LI") {
    console.log("Clicked item:", e.target.textContent);
  }
});

Here event.target is the specific <li> that was clicked. This allows tracking clicks on dynamically created elements.

Summary