JavaScript Interview Question #62

What is the difference between event.target and event.currentTarget?

DOM, Events & Event Loop Fundamentals Mid-Level Intermediate

Quick Interview Answer

event.target is the element where the event originated, which may be a descendant of the element whose listener is currently running. event.currentTarget is the element whose event listener is currently being executed.

Detailed Explanation

This distinction is especially important with bubbling and event delegation because a listener on a parent can receive events that originated from many child elements.

Code Example

const list = document.querySelector("#list");

list.addEventListener("click", event => {
    console.log("Origin:", event.target);
    console.log("Listener:", event.currentTarget);
});