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.