What does event.target do?
event.target is one of the most useful properties of an event object.
It shows the element on which the event actually occurred,
that is, the "source" of the event.
Definition
event.targetis the DOM element on which the event first occurred (for example, a click, input, hover, and so on).
You can get it inside an event handler that receives the event object:
element.addEventListener('click', function(event) {
console.log(event.target);
});Example 1: basic
<div id="container">
<button id="btn">Click me</button>
</div>document.querySelector('#container').addEventListener('click', (event) => {
console.log('event.target:', event.target);
});If you click the button, the console will show:
event.target: <button id="btn">Click me</button>So target = the element that was clicked,
not the one the handler is "attached to" (#container).
Example 2: difference from currentTarget
| Property | What it shows |
|---|---|
event.target | The element where the event occurred (the inner one) |
event.currentTarget | The element the handler is attached to |
document.querySelector('#container').addEventListener('click', (event) => {
console.log('target:', event.target);
console.log('currentTarget:', event.currentTarget);
});If you click a <button> inside the container:
target: <button>
currentTarget: <div id="container">Example 3: event delegation
This is one of the most common uses of event.target.
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>document.querySelector('#list').addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
console.log(`Clicked element: ${event.target.textContent}`);
}
});Here we attached one handler to the whole list,
and inside it we check exactly which <li> was clicked.
This is called event delegation - it saves memory and speeds things up, especially when there are many elements.
Example 4: in forms
form.addEventListener('input', (event) => {
console.log('Changed element:', event.target.name);
console.log('New value:', event.target.value);
});Lets you track changes across all form fields through a single handler.
Summary
| Property | What it does |
|---|---|
event.target | The element where the event occurred |
event.currentTarget | The element the handler is attached to |
| Used for | Delegation, checking the event's source, accessing the clicked element |
| Data type | A DOM element (HTMLElement) |
Conclusion:
event.targetis the "true source" of the event. With it, you can find out exactly where the user clicked, entered text, or triggered another action.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.