dom-events

What's the difference between target, srcElement and currentTarget?

I would like to know the difference between srcTarget, target, and currentTarget to use one of those in active class in navbar to add/remove it on mousemove, click

Solution

  • srcElement is a deprecated alias for target. Do not use it.

    target is the element on which the event was triggered.

    currentTarget is the element that caught the event.

    For example:

    <button id="outer" onclick="foo()">
    <div id="inner">I am a child element</div>
</button>

    If the user clicks on the #inner element, then in the event object sent to foo, target will be #inner and currentTarget will be #outer.

    Here is related documentation:

    https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling#target_and_currenttarget