Suggest an edit

Improve this article

Refine the answer for “What does event.target do?”. 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` 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.target` is 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:

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

## Example 1: basic

```javascript
<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 will show:

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

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

If you click a `<button>` inside the container:

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

## Example 3: event delegation

This is one of the most common uses of `event.target`.

```javascript
<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 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

```javascript
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.target` is the "true source" of the event.
> With it, you can find out exactly where the user clicked, entered text, or triggered another action.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.