DEV Community

Cover image for An In-Depth Guide on event.Target and event.currentTarget
Jesse Wei
Jesse Wei

Posted on

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

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>
Enter fullscreen mode Exit fullscreen mode

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

rendered image of example code

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)
}
Enter fullscreen mode Exit fullscreen mode

Clicking the p element logs the following.

result of logging event.target when p element is clicked

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

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

result of logging event.target when div is clicked


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)
}
Enter fullscreen mode Exit fullscreen mode

Now, clicking p produces the following result.

result of logging event.currentTarget when p is clicked

Clicking div logs this.

result of logging event.currentTarget when div is clicked

And clicking form produces this.

result of logging event.currentTarget when form is clicked

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)
}
Enter fullscreen mode Exit fullscreen mode

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


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.

Top comments (0)