An In-Depth Guide on event.Target and event.currentTarget

The Event interface 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
What targets & currentTargets Are
- event.target
- event.currentTarget
An event.target Example
An event.currentTarget 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.

<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).

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

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.

There are some important takeaways here:

I clicked only the p element but div and form also logged. This is because of something called event bubbling. 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.
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.

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

An event.currentTarget Example

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

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.

Clicking div logs this.

And clicking form produces this.

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.

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

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.

Blog

An In-Depth Guide on event.Target and event.currentTarget

Jesse Wei

Table of Contents