currentTarget vs. e.Target

While learning Javascript, you will undeniably encounter event listeners, and with them, event targets. When working with event listeners, one should be aware of a particular quirky behavior known as event bubbling.

Let’s say we have a pair of nested elements, both of which have event listeners. If the innerDiv is listening for a click event, when the div is clicked, the event will fire within innerDiv’s before moving up and firing on the outerDiv element. By default, the event will travel upwards to innerDiv’s parent, outerDiv.

When it bubbles, it fires the event set for that element (in this case, outerDiv) and so on and so forth up the line. The event is bubbling up from the target element clicked (innerDiv) all the way to the furthest parent element.

All of this to say that a single click can fire up both listeners depending on where it takes place. If the user clicks on outerDiv, only the event placed out outerDiv will be triggered. Clicking on outerDiv will not trigger anything within innerDiv since as a rule, bubbling travels outwardly.

If the click happens on innerDiv: target = innerDiv, currentTarget = outerDiv.

Target (also known as e.target) is where the event was set off (what you actually clicked on), currentTarget is where the event is currently firing as it bubbles up (the element the event is happening on). To reiterate: currentEvent refers to the element the event handler is attached to, target refers to the element that triggered the event.

If the click happens on outerDiv: target = outerDiv, currentTarget = outerDiv. If this is still weird, click here :

https://joequery.me/code/event-target-vs-event-currenttarget-30-seconds/

If you’re ever in a pickle and have access to an event object but need access to a DOM element, use currentTarget to grab the element associated with the event handler.

Happy Coding!