The difference between event target and event currentTarget

Now that we understand event flow in JavaScript, let's look at some of the properties available to the event object. We'll start with the difference between the target and currentTarget properties.

The target property

The target property refers to the element that dispatched the event. This is not necessarily the element to which the event listener was added. You normally use the target property with event delegation.

Given the following HTML:

<div id="app">
  <p>This is a paragraph...</p>
  <button type="button">Click Me!</button>
</div>

And the following JavaScript:

var app = document.querySelector("#app");

function logTarget (event) {
  console.log(event.target);
}

app.addEventListener("click", logTarget);

If you click on the paragraph, that's what the event.target will be. If you click on the button, it'll be that. And if you click anywhere else inside the #app element, it will be the #app element itself.

The event.target is the innermost element that dispatched the event.

The currentTarget property

On the other hand, the currentTarget property refers to the element to which the event listener was added.

In the previous example, if we console.log(event.currentTarget) instead, it will always be the #app element. This is because that's the element to which we added the event listener.

In other words, the event.currentTarget will refer to the same element as the this keyword in this context. If we console.log(event.currentTarget === this) inside our event listener, it will always be true.

In practical terms

I've made a quick demo on CodePen to show all this in action.

In practical terms, I'm not sure when I'd use the currentTarget property instead of the this keyword. I use the event.target property all the time, though, because I love the event delegation model. It's a lot more performant (and easier to work with) than attaching dozens of individual event listeners.