0

A very simple situation:

<div class="item">
  <div class="text">test</div>
</div>

And the javascript:

var item = document.querySelector('.item');
item.addEventListener('click', function(e){
  console.log(e.target);
})

I cannot seem to understand, why, if I have bound the event to the item, the event target shows up as the child and not the element I have originally bound it to?

I apologise if this is duplicate, I sincerely looked for similar question and answer beforehand, but did not find anything that would explain this.

Thanks.

jacobdo
  • 1,605
  • 3
  • 15
  • 34
  • 1
    Because a click on the child is also a click on the parent and events bubble up. The `target` property refers to the element that the event was activated on. `currentTarget` refers to the element the event handler was attached to. If you change `target` to `currentTarget` you will get the parent element. – Scott Marcus Dec 07 '16 at 20:01
  • 1
    You did not bind the event to the parent, you bound the event *handler* to the parent. The event target is the child because because it is what you clicked. – Old Pro Dec 07 '16 at 20:03

0 Answers0