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.

Insubordinate

This fiddle shows the difference very clearly – Ferry

does anyone know ActionScript3 well enough to confirm that its events behave the same as DOM events? – Parrie

JavaScript equivalent: #10086927 – Parrie

A reference provided by Murhaf Sousli is a clean explanation answering a question of what a difference is. A little simplified version of this fiddle would be the best answer. – Southing

@ben-creasy please checkout my answer , I'll tried to compare it in both language with side by side code samples in as3 and js – Anisotropic

Answer 1

Ben is completely correct in his answer - so keep what he says in mind. What I'm about to tell you isn't a full explanation, but it's a very easy way to remember how e.target, e.currentTarget work in relation to mouse events and the display list:

e.target = The thing under the mouse (as ben says... the thing that triggers the event). e.currentTarget = The thing before the dot... (see below)

So if you have 10 buttons inside a clip with an instance name of "btns" and you do:

btns.addEventListener(MouseEvent.MOUSE_OVER, onOver);
// btns = the thing before the dot of an addEventListener call
function onOver(e:MouseEvent):void{
  trace(e.target.name, e.currentTarget.name);
}

e.target will be one of the 10 buttons and e.currentTarget will always be the "btns" clip.

It's worth noting that if you changed the MouseEvent to a ROLL_OVER or set the property btns.mouseChildren to false, e.target and e.currentTarget will both always be "btns".

Haematoblast

So, in other words, target are the childs and currentTarget are the containers. – Insubordinate

No, currentTarget is always the object listening for the event; target is the actual target that received the event. Per event bubbling, the target receives the event and it bubbles up the display list. (Or the other way round for event capturing) – Pleat

If it was a child that dispatched the event then yes targets are the children. Normally you will want to use e.currentTarget as this is what you assigned the listener to. But in situations, such as the one Zevan listed above where you want one listener on a container with multiple children, you'd then use e.target to see which of the children dispatched the event. – Esperance

comment from @Pleat above is the best answer "currentTarget is always the object listening, target is the actual target that received the event" – Woodchuck

I have no idea what this means: 'So if you have 10 buttons inside a clip with an instance name of "btns"' – Drifter

@JohnHarding it just means a movieclip in flash or these days adobe animate – Haematoblast

Answer 2

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

Esperance

Here is a good example: joequery.me/code/event-target-vs-event-currenttarget-30-seconds – Heritage

Answer 3

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/

Compressor

The question is about AS3 not JS. – Insubordinate

Ah okay, sorry about the tagging. The answer still aplies to both though. – Compressor

Answer 4

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.

Conlen

Answer 5

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.

Primaveras

Answer 6

It's worth noting that event.target can be useful, for example, for using a single listener to trigger different actions. Let's say you have the typical "menu" sprite with 10 buttons inside, so instead of doing:

menu.button1.addEventListener(MouseEvent.CLICK, doAction1);
menu.button2.addEventListener(MouseEvent.CLICK, doAction2);
etc...

You can simply do:

menu.addEventListener(MouseEvent.CLICK, doAction);

And trigger a different action within doAction(event) depending on the event.target (using it's name property, etc...)

Sterne

Answer 7

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!

Waldron

Answer 8

e.currentTarget would always return the component onto which the event listener is added.

On the other hand, e.target can be the component itself or any direct child or grand child or grand-grand-child and so on who received the event. In other words, e.target returns the component which is on top in the Display List hierarchy and must be in the child hierarchy or the component itself.

One use can be when you have several Image in Canvas and you want to drag Images inside the component but Canvas. You can add a listener on Canvas and in that listener you can write the following code to make sure that Canvas wouldn't get dragged.

function dragImageOnly(e:MouseEvent):void
{
    if(e.target==e.currentTarget)
    {
        return;
     }
     else
     {
        Image(e.target).startDrag();
     }
}

Therron

Answer 9

• 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.

Darton

Answer 10

e.currentTarget is element(parent) where event is registered, e.target is node(children) where event is pointing to.

Neutrophil