The event.target property

JavaScriptJunior~2 min read

event.target points at the element on which the event actually happened, that is, the source of the event. It is one of the most useful properties of the event object: it tells you exactly where the user clicked, what they typed, or which action they triggered.

Theory

TL;DR

event.target is the DOM element where the event originated.
It does not necessarily match the element the handler is attached to.
The element holding the handler is available as event.currentTarget.
In both cases the value is a DOM element (HTMLElement).
The main use case is event delegation: one listener instead of hundreds.
In forms, event.target.name and event.target.value give you the changed field and its new value.

Quick example

javascript

element.addEventListener('click', function (event) {
  console.log(event.target);
});

The property is available inside any handler that receives the event object.

What event.target is

event.target is the DOM element on which the event first happened: a click, an input, a hover and so on.

html

<div id="container">
  <button id="btn">Click me</button>
</div>

javascript

document.querySelector('#container').addEventListener('click', (event) => {
  console.log('event.target:', event.target);
});

If you click the button, the console shows:

text

event.target: <button id="btn">Click me</button>

So target is the element that was clicked, not the one the handler hangs on (#container). The event bubbles up from the button to the container, but the target property does not change along the way.

target versus currentTarget

Property	What it shows
`event.target`	the element where the event happened (the inner one)
`event.currentTarget`	the element the handler is attached to

javascript

document.querySelector('#container').addEventListener('click', (event) => {
  console.log('target:', event.target);
  console.log('currentTarget:', event.currentTarget);
});

If the click lands on the <button> inside the container:

text

target: <button>
currentTarget: <div id="container">

Event delegation

This is the most common use of event.target.

html

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

javascript

document.querySelector('#list').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log(`Clicked on item: ${event.target.textContent}`);
  }
});

Here we attached one handler to the whole list and check inside which <li> was actually clicked. This is called event delegation: it saves memory and speeds things up, especially when there are many items or they appear dynamically.

Working with forms

javascript

form.addEventListener('input', (event) => {
  console.log('Changed element:', event.target.name);
  console.log('New value:', event.target.value);
});

This lets you track changes in every form field through one handler, without subscribing to each <input> separately.

Summary

Property	What it does
`event.target`	the element where the event happened
`event.currentTarget`	the element the handler is attached to
Used for	delegation, checking the source of an event, reaching the clicked element
Data type	a DOM element (`HTMLElement`)

Conclusion: event.target is the true source of an event. With it you can tell precisely where the user clicked, typed text, or triggered some other action.

Common mistakes

Confusing target with currentTarget and trying to read the container's dataset off event.target.
Forgetting that currentTarget is available inside the handler but becomes null once the handler returns: capture the value right away.
Checking only event.target.tagName in delegation when the <li> has nested elements: a click on a <span> yields SPAN. event.target.closest('li') is safer.
Assuming event.target is always an element: for non-DOM events (an XMLHttpRequest, for instance) it is a different object.
Using this instead of currentTarget inside an arrow function, where this does not point at the element.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.