J. Pedro Ribeiro

event.target vs event.currentTarget - What is the difference?

January 29, 2023

event tagname example

This is a common question that I ask myself sometimes, the easiest way I find to explain is as follows: event.currentTarget is the element where the event listener was attached, for example:

<button id="my_element">Click me</button>

// JavaScript
document.getElementById("my_element").addEventListener("click", ...);

In this case, my_element is going to be the event.currentTarget.

On the other hand, event.target is any element (or any of its children) that triggered the event, for example:

<p> This <b>is</b> a <span>paragraph</span>.</p>

// JavaScript
document.querySelector("p").addEventListener("click", ...);

In this case, clicking on any element will trigger the event listener, but event.target will be the specific element that was clicked, in this case, p, b or span.

The code below makes this explanation a bit more clear:

J. Pedro Ribeiro

I’m a Brazilian front-end developer living in London. This website features some of my latest projects and my thoughts on anything web related.
You can find me on Twitter, Instagram, and LinkedIn.
Wanna talk? Send me a message.