target vs currentTarget

`target` identifies the element where an event originated, while `currentTarget` identifies the element whose event listener is currently running.

When a browser event occurs, the event object exposes both `target` and `currentTarget`. They can be the same element, but they describe different roles in event dispatch.

`target` is the original event target: the most deeply nested element on which the interaction occurred. With event bubbling, that value remains the same as the event moves through ancestor elements.

`currentTarget` is the element associated with the listener that is currently executing. If a parent has a click listener and the user clicks a child, `event.target` is the child while `event.currentTarget` is the parent.

This distinction is especially important with event delegation. A parent can listen for events from many descendants, inspect `target` to determine what was clicked, and use `currentTarget` to identify the element owning the listener.

Key points

• `target` is the event's originating element.
• `currentTarget` is the element whose listener is executing.
• They differ when an ancestor handles a bubbled event from a descendant.
• Event delegation commonly relies on `target` while `currentTarget` identifies the delegated listener's element.

Interview questions

What is the difference between `event.target` and `event.currentTarget`?

`event.target` is the element where the event originated. `event.currentTarget` is the element whose listener is currently handling the event. They are equal when the listener is attached directly to the event's originating element. They commonly differ when an event bubbles from a child to a parent listener.

A parent has a click listener and a button inside it is clicked. What are `target` and `currentTarget`?

For the parent's listener, `event.target` is the button because that is where the click originated. `event.currentTarget` is the parent because that is where the listener is attached. The event reaches the parent through propagation. This distinction lets the parent handle clicks from multiple descendants.

Why is `target` useful for event delegation?

Event delegation places one listener on a common ancestor instead of attaching separate listeners to many descendants. The delegated listener can inspect `event.target` to determine which descendant initiated the event. `event.currentTarget` identifies the ancestor that owns the listener. In practice, code often checks the target or a matching ancestor before performing an action.

Can `event.target` and `event.currentTarget` ever be the same element?

Yes. They are the same when the event originates on the element whose listener is executing. For example, a button with its own click listener can have both properties refer to that button. They diverge when the event originates on a descendant and is handled by an ancestor.

How do `target` and `currentTarget` behave during event propagation?

`target` represents the event's original target throughout propagation. `currentTarget` identifies the element whose registered listener is executing at a particular point in propagation. As the event travels through ancestors, different listeners can therefore observe different `currentTarget` values while seeing the same `target`. This distinction applies across the propagation path rather than being limited to bubbling.