event object. We’ll start with the difference between 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:
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.
event.target is the innermost element that dispatched the event.
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
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
If you find the
this keyword confusing (which is totally normal), you might find the
currentTarget property to be a more readable alternative?
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.
If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!