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

User · Answer

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

User · Answer

e currentTarget  is element parent  where event is registered  e target is node children  where event is pointing to

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[actionscript-3] Difference between e.target and e.currentTarget

Examples related to actionscript-3

Examples related to events

Examples related to event-handling