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
- Table of Contents
- What targets & currentTargets Are
- 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
pelement butdivandformalso 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 todivandformwere called as well in the example above. - Event bubbling does NOT affect the target of the event. Notice that all three log messages said
pwas theevent.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.targetis the element that triggered the event and there is only onetargetin a triggering of an event. - An
event.currentTargetis 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 anevent.currentTarget.
Top comments (0)