Suggest an edit

Improve this article

Refine the answer for “How does event.target differ from event.currentTarget?”. 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)

## 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

```javascript
<div id="parent">
  <button id="child">Click me</button>
</div>
```

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

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

In other words:

- `target` is where the event **originated** (inside the button),
- `currentTarget` is where the **handler is currently running** (on the parent).

## Example 2: clicking the parent directly

If you click `div#parent` itself, then:

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

- `currentTarget` is the element that has this handler attached,
- `target` is 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:

```javascript
<ul id="menu">
  <li>Home</li>
  <li>Catalog</li>
  <li>Contacts</li>
</ul>
```

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

```javascript
target: Catalog
currentTarget: menu
```

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

```javascript
parent.addEventListener('click', (e) => console.log('parent', e.currentTarget));
child.addEventListener('click', (e) => console.log('child', e.currentTarget));
```

If you click the button:

```javascript
child <button id="child">
parent <div id="parent">
```

- First, the handler on the button fires (`target` and `currentTarget` = button),
- Then the event bubbles up to the `div`, where `currentTarget` = div, while `target` stays 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:**
> `target` is "where it happened",
> `currentTarget` is "who is listening".

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.