What is the exact difference between currentTarget property and target property in javascript

What is the exact difference between currentTarget property and target property in javascript

Can anyone please tell me the exact difference between currentTarget and target property in Javascript events with example and which property is used in which scenario?

Solutions/Answers:

Solution 1:

Basically, events bubble by default so the difference between the two is:

  • target is the element that triggered the event (e.g., the user clicked on)
  • currentTarget is the element that the event listener is attached to.

See a simple explanation on this blog post.

Solution 2:

target = element that triggered event.

currentTarget = element that listens to event.

Solution 3:

Minimal runnable example

window.onload = function() {
  var resultElem = document.getElementById('result')
  document.getElementById('1').addEventListener(
    'click',
    function(event) {
      resultElem.innerHTML += ('<div>target: ' + event.target.id + '</div>')
      resultElem.innerHTML += ('<div>currentTarget: ' + event.currentTarget.id + '</div>')
    },
    false
  )
  document.getElementById('2').dispatchEvent(
          new Event('click', { bubbles:true }))
}
<div id="1">1 click me
  <div id="2">2 click me as well</div>
</div>
<div id="result">
  <div>result:</div>
</div>

If you click on:

2 click me as well

then 1 listens to it, and appends to the result:

target: 2
currentTarget: 1

because in that case:

  • 2 is the element that originated the event
  • 1 is the element that listened to the event
Related:  How to delete a cookie?

If you click on:

1 click me

instead, the result is:

target: 1
currentTarget: 1

Tested on Chromium 71.

Solution 4:

If this isn’t sticking, try this:

current in currentTarget refers to the present. It’s the most recent target that caught the event that bubbled up from elsewhere.

Solution 5:

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

If click on the P tag in above code then you will get three alert,and if you click on the div tag you will get two alert and a single alert on clicking the form tag.
And now see the following code,

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>
<script>
function fun(event){
  alert(event.target+" "+event.currentTarget);
}

</script>

<form>FORM
  <div onclick="fun(event)">DIV
    <p>P</p>
  </div>
</form>

We just removed onclick from the P and form tag and now when we click we on P tag we get only one alert:

[object HTMLParagraphElement] [object HTMLDivElement]

Here event.target is [object HTMLParagraphElement],and event.curentTarget is [object HTMLDivElement]:
So

event.target is the node from which the event originated,
and
event.currentTarget, on the opposite, refers to the node on which current-event listener was attached.To know more see bubbling

Here we clicked on P tag but we don’t have listener on P but on its parent element div.

Related:  MongoDB - what is the fastest way to update all records in a collection?

Solution 6:

event.target is the node from which the event originated, ie. wherever you place your event listener (on paragraph or span), event.target refers to node (where user clicked).

event.currentTarget, on the opposite, refers to the node on which current-event listener was attached. Ie. if we attached our event listener on paragraph node, then event.currentTarget refers to paragraph while event.target still refers to span.
Note: that if we also have an event listener on body, then for this event-listener, event.currentTarget refers to body (ie. event provided as input to event-listerners is updated each time event is bubbling one node up).