Suggest an edit

Improve this article

Refine the answer for “The event.target property”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**`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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts602 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.