What's the Difference Between JavaScript Event.currentTarget and Event.target?

In JavaScript, the main difference between Event.target and Event.currentTarget properties is that:

• target refers to the element that triggered the event;
• currentTarget refers to the element that the event handler/listener is attached to.

For example:

<div id="target">
    <span>click me</span>
</div>

const elem = document.getElementById('target'); // div

elem.addEventListener('click', function (event) {
    console.log(event.target); // span
    console.log(event.currentTarget); // div
});

As you can see from the example above, when you click on the <span> element, the currentTarget would refer to the element that the event handler is attached to (i.e. <div>), and the target would refer to the element that triggered the event (i.e. <span>).

In the following example, the target and the currentTarget are going to be the same elements because the element that triggers the event, and the element that the event handler is attached to, are the same:

<div>
    <span id="target">click me</span>
</div>

const elem = document.getElementById('target'); // span

elem.addEventListener('click', function (event) {
    console.log(event.target); // span
    console.log(event.currentTarget); // span
});