(guest@joequery.me)~ $ |

JavaScript event.target vs event.currentTarget in 30 seconds

Example

In the example below, there's a click event bound to the outer box, with an id thebox. There's an inner box with an id hello.

Since hello is within thebox, clicking on hello will trigger the click event bound to thebox. But you can also click in the empty space outside of hello to trigger the event as well.

Just click stuff and you'll see what I mean.

Why you should care

Suppose you're in a situation where you have access to an event object but not the DOM element. (In other words, no $(this)). If you want access to the DOM element that's associated with the event handler you defined, you should use currentTarget.

TL;DR

  • target is whatever you actually clicked on. It can vary, as this can be within an element that the event was bound to.
  • currentTarget is the element you actually bound the event to. This will never change.

Need more info?

Visit the MDN docs on currentTarget

Tagged as javascript

Date published - May 27, 2015