How does event.target differ from event.currentTarget?
In short:
| Property | What it shows |
|---|---|
event.target | The element where the event actually occurred (the source, "clicked here") |
event.currentTarget | The element the handler is currently running on (the one that is "listening") |
Example 1: the basic difference
<div id="parent">
<button id="child">Click me</button>
</div>const parent = document.querySelector('#parent');
const child = document.querySelector('#child');
parent.addEventListener('click', (event) => {
console.log('target:', event.target);
console.log('currentTarget:', event.currentTarget);
});If you click the button (#child), the console shows:
target: <button id="child">
currentTarget: <div id="parent">In other words:
targetis where the event originated (inside the button),currentTargetis where the handler is currently running (on the parent).
Example 2: clicking the parent directly
If you click div#parent itself, then:
target: <div id="parent">
currentTarget: <div id="parent">Both match, because the event both occurred and is being handled on the same element.
Why is that?
Because DOM events bubble:
they first occur on a specific element (target),
then travel up the tree, to its parents.
At every level, its own handler is called. At the moment it is called:
currentTargetis the element that has this handler attached,targetis the original source of the event (it does not change during bubbling).
Example 3: event delegation
A very common case is a single handler on the container:
<ul id="menu">
<li>Home</li>
<li>Catalog</li>
<li>Contacts</li>
</ul>const menu = document.querySelector('#menu');
menu.addEventListener('click', (event) => {
console.log('target:', event.target.textContent);
console.log('currentTarget:', event.currentTarget.id);
});If you click the "Catalog" item:
target: Catalog
currentTarget: menutarget is the specific <li>,
currentTarget is the <ul> itself, where the handler is attached.
This is exactly why delegation works:
we listen for a single event (click on the list),
but use event.target to determine which item was clicked.
Example 4: several listeners
parent.addEventListener('click', (e) => console.log('parent', e.currentTarget));
child.addEventListener('click', (e) => console.log('child', e.currentTarget));If you click the button:
child <button id="child">
parent <div id="parent">- First, the handler on the button fires (
targetandcurrentTarget= button), - Then the event bubbles up to the
div, wherecurrentTarget= div, whiletargetstays the same (button).
Summary
| Property | Description | Changes during bubbling? |
|---|---|---|
event.target | The element where the event occurred | No, always the same |
event.currentTarget | The element the handler is currently running on | Yes, different at every level |
| Used for | Determining the source of the event | Getting the listening element itself |
Simple rule of thumb:
targetis "where it happened",currentTargetis "who is listening".
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.