All 10 DOM & Events questions
More in DOM & Events
What is event bubbling? What does event.preventDefault() do? How do you select and modify an element's text content? What is event delegation and why is it a performance best practice? How do you create and dispatch a custom DOM event? What's the difference between the capturing and bubbling phases of event propagation? How do you properly clean up event listeners to avoid memory leaks? What is the difference between passive and non-passive event listeners for scroll performance? How does MutationObserver let you react to DOM changes made by other code?
Advertisement
Back to results for “DOM & Events”
JavaScript › DOM & Events

What's the difference between event.target and event.currentTarget?

Intermediate

Answer

event.target is the actual element that originated the event (e.g., the specific <li> clicked); event.currentTarget is the element the listener is currently attached to and executing on (e.g., the parent <ul> during bubbling).
list.addEventListener('click', (e) => {
  console.log(e.target);        // the <li> clicked
  console.log(e.currentTarget); // the <ul> the listener is on
});
Real-world example Using target to identify which specific button in a toolbar was clicked, while currentTarget stays constant.

Common follow-ups: Does currentTarget change value during the bubbling phase?

Design Patterns in JavaScript
All 10 DOM & Events questions