Difference between e.target and e.currentTarget

Question

I don\'t understand the difference, they both seem the same but I guess they are not.

Any examples of when to use one or the other would be appreciated.

Answer 1

e.currentTarget is always the element the event is actually bound do. e.target is the element the event originated from, so e.target could be a child of e.currentTarget, or e.target could be === e.currentTarget, depending on how your markup is structured.

Answer 2

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.

Answer 3

• e.target is element, which you f.e. click
• e.currentTarget is element with added event listener.

If you click on child element of button, its better to use currentTarget to detect buttons attributes, in CH its sometimes problem to use e.target.

Answer 4

I like visual answers.

When you click #btn, two event handlers get called and they output what you see in the picture.

Demo here: https://jsfiddle.net/ujhe1key/

Answer 5

e.target is what triggers the event dispatcher to trigger and e.currentTarget is what you assigned your listener to.

Answer 6

make an example:

var body = document.body,
    btn = document.getElementById( 'id' );
body.addEventListener( 'click', function( event ) {
    console.log( event.currentTarget === body );
    console.log( event.target === btn );
}, false );

when you click 'btn', and 'true' and 'true' will be appeared!