score:18

Accepted answer

What was the cause of this strange behavior? Why I was getting the expected value sometimes?

This was happening because I was clicking on the span element which is inside the button element. While clicking on the button sometimes I was actually clicking on the span element. Those clicks are not bound to the button element rather it fires the click event on span element. And that was the reason of this strange behavior.

In short,

target: whatever element somebody 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.

Reference:

  1. Target value sometimes undefined
  2. event target vs event currenttarget

Related Query

More Query from same tag