An In-Depth Guide on event.Target and event.currentTarget
Tags: webdev
Published: 2022-06-12 11:59:21

The [Event interface](https://developer.mozilla.org/en-US/docs/Web/API/Event) represents an event which takes place in the DOM. 

It has a `target` and a `currentTarget` read-ony property, but it can be confusing what the difference is between the two so in this post, let's take a closer look at both.

## Table of Contents

- [Table of Contents](#table-of-contents)
- [What targets & currentTargets Are](#what-targets--currenttargets-are)
  - [event.target](#eventtarget)
  - [event.currentTarget](#eventcurrenttarget)
- [An event.target Example](#an-eventtarget-example)
- [An event.currentTarget Example](#an-eventcurrenttarget-example)

---

## What targets & currentTargets Are

### event.target

It refers to **the element that triggered the event**.

### event.currentTarget

It refers to **the element that a handler for the event is attached to (and not necessarily the one which triggered the event)**.

A handler **for the event** is important here, as if the element's handler handles a different event, it does not qualify for a `currentTarget`.

---

## An event.target Example

Examples are the easiest way to understand an abstract concept. Here is a simple html snippet that I will use across the post.

```html
<body>
  <form>FORM
    <div>DIV
      <p>P</p>
    </div>
  </form>
  <script>
    const form = document.querySelector("form")
    const div = document.querySelector("div")
    const p = document.querySelector("p")

    form.onclick = function(event) {
      // do something
    }
    div.onclick = function(event) {
      // do something
    }
    p.onclick = function(event) {
      // do something
    }
  </script>
</body>
```

It looks like this (I left out the CSS code for simplicity).

![rendered image of example code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd4orkybel1joe2l2zul.PNG)

Now, I log the `target` in each handler to see what happens when an event fires.

```javascript
form.onclick = function(event) {
  console.log("form: ", event.target)
}
div.onclick = function(event) {
  console.log("div: ", event.target)
}
p.onclick = function(event) {
  console.log("p: ", event.target)
}
```

Clicking the `p` element logs the following.

![result of logging event.target when p element is clicked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbfi3s8nki211sz0hlbt.PNG)

There are some important takeaways here:

1. I clicked only the `p` element but `div` and `form` also logged. This is because of something called [event bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture). By default, an event like clicking does not stop where it is triggered and instead *bubbles* upwards to its parents, its parents' parents and so on. That is why handlers attached to `div` and `form` were called as well in the example above.
2. Event bubbling does **NOT** affect the **target** of the event. Notice that all three log messages said `p` was the `event.target`.

Now let's try clicking the `div` element and the log messages should be no surprise.

![result of logging event.target when div is clicked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyn4kk287euvypmv1c4c.PNG)

And the log of clicking the `form` element is as expected too.

![result of logging event.target when div is clicked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krvh32tudy3yh215xl4l.PNG)

---

## An event.currentTarget Example

Now, let's change `event.target` to `event.currentTarget` in the log methods.

```javascript
form.onclick = function(event) {
  console.log("form: ", event.currentTarget)
}
div.onclick = function(event) {
  console.log("div: ", event.currentTarget)
}
p.onclick = function(event) {
  console.log("p: ", event.currentTarget)
}
```

Now, clicking `p` produces the following result.

![result of logging event.currentTarget when p is clicked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttt7ji7e2pcj0pwkjg83.PNG)

Clicking `div` logs this.

![result of logging event.currentTarget when div is clicked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fpsg454nqkw5cz18akf4.PNG)

And clicking `form` produces this.

![result of logging event.currentTarget when form is clicked](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onke4x1wly46j176p9ig.PNG)

Remember that every element, from the one that triggered the event to its parents, its parents' parents and so on, qualifies as an `event.currentTarget` **if it has a handler that can handle the event**. 

In this example, each of the three elements has *a handler for the click event*, so when the event fires on an element and bubbles upwards, every element from the one and above invokes its own handler and logs itself as `event.currentTarget`.

Here, **a handler for the click event** is particularly important, because a handler for a different event does not qualifies the element as an `event.currentTarget` for the specified event. For example, let's change the click event handler to drop event handler for `p`.

```javascript
...
p.ondrop = function(event) {
  console.log("p: ", event.currentTarget)
}
```

Now, clicking `p` again and we can see that handler for `p` is NOT invoked because the handler only handles drop events and not click events.


![result of logging event.currentTarget after handler for p is changed from click to drop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmljov9pktx3hrxgrq5p.PNG)

---

## Conclusion

In this guide, we learned that,

- An `event.target` is **the element that triggered the event** and there is only one `target` in a triggering of an event.
- An `event.currentTarget` is **an element that a handler for the event is attached to (and not necessarily the one which triggered the event) in the DOM tree where the event can reach by bubbling**. If the element has a handler but for a different event, then the element does NOT qualifies as an `event.currentTarget`.