Différence entre e.target et e.currentTarget

277

Je ne comprends pas la différence, ils semblent tous les deux identiques mais je suppose qu'ils ne le sont pas.

Tout exemple d'utilisation de l'un ou de l'autre serait apprécié.

Artemix
la source
2
Ce violon montre très clairement la différence
Murhaf Sousli
1
Quelqu'un connaît-il suffisamment ActionScript3 pour confirmer que ses événements se comportent de la même manière que les événements DOM?
Ben Creasy
2
Équivalent JavaScript: stackoverflow.com/questions/10086427/…
Ben Creasy
Une référence fournie par Murhaf Sousli est une explication claire répondant à une question de ce qu'est une différence. Une petite version simplifiée de ce violon serait la meilleure réponse.
azakgaim

Réponses:

205

Ben a complètement raison dans sa réponse - alors gardez à l'esprit ce qu'il dit. Ce que je suis sur le point de vous dire n'est pas une explication complète, mais c'est un moyen très facile de se rappeler comment e.target, e.currentTargettravailler en relation avec les événements de la souris et la liste d'affichage:

e.target= La chose sous la souris (comme dit ben ... la chose qui déclenche l'événement). e.currentTarget= La chose avant le point ... (voir ci-dessous)

Donc, si vous avez 10 boutons dans un clip avec un nom d'occurrence "btns" et que vous faites:

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.targetsera l'un des 10 boutons et e.currentTargetsera toujours le clip "btns".

Il convient de noter que si vous avez modifié le MouseEvent à un ROLL_OVER ou définissez la propriété btns.mouseChildrensur false, e.targetet e.currentTargetsera toujours à la fois « btns ».

Zevan
la source
2
En d'autres termes, target sont les enfants et currentTarget sont les conteneurs.
Artemix
107
Non, currentTargetc'est toujours l'objet qui écoute l'événement; targetest la cible réelle qui a reçu l'événement. Par événement bouillonnant, la cible reçoit l'événement et il bouillonne la liste d'affichage. (Ou l'inverse pour la capture d'événement)
poke
4
Si c'est un enfant qui a envoyé l'événement, oui, les cibles sont les enfants. Normalement, vous voudrez utiliser e.currentTarget car c'est à cela que vous avez affecté l'auditeur. Mais dans des situations telles que celle de Zevan répertoriée ci-dessus, où vous voulez un écouteur sur un conteneur avec plusieurs enfants, vous utiliserez alors e.target pour voir lequel des enfants a distribué l'événement.
Ben Gale
le commentaire de @poke ci-dessus est la meilleure réponse "currentTarget est toujours l'objet à l'écoute, la cible est la cible réelle qui a reçu l'événement"
PandaWood
28

e.currentTargetest toujours l'élément auquel l'événement est réellement lié. e.targetest l'élément dont provient l'événement, il e.targetpeut donc être un enfant e.currentTargetou e.targetêtre === e.currentTarget, selon la structure de votre balisage.

Alex K
la source
25

J'aime les réponses visuelles.

entrez la description de l'image ici

Lorsque vous cliquez sur #btn, deux gestionnaires d'événements sont appelés et ils affichent ce que vous voyez dans l'image.

Démo ici: https://jsfiddle.net/ujhe1key/

Maria Ines Parnisari
la source
La question concerne AS3 et non JS.
Artemix
1
Ah d'accord, désolé pour le marquage. La réponse reste cependant valable pour les deux.
Maria Ines Parnisari
8

Il convient de noter que event.target peut être utile, par exemple, pour utiliser un seul écouteur pour déclencher différentes actions. Disons que vous avez le sprite "menu" typique avec 10 boutons à l'intérieur, donc au lieu de faire:

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

Vous pouvez simplement faire:

menu.addEventListener(MouseEvent.CLICK, doAction);

Et déclenchez une action différente dans doAction (événement) en fonction de event.target (en utilisant sa propriété name, etc ...)

Banc de sable
la source
5

faire un exemple:

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

lorsque vous cliquez sur «btn», «vrai» et «vrai» apparaîtront!

Yuan Zhaohao
la source
3

e.currentTarget renvoie toujours le composant sur lequel l'écouteur d'événements est ajouté.

D'un autre côté, e.target peut être le composant lui-même ou tout enfant direct ou petit-enfant ou arrière-petit-enfant et ainsi de suite qui a reçu l'événement. En d'autres termes, e.target renvoie le composant qui se trouve en haut de la hiérarchie de la liste d'affichage et doit être dans la hiérarchie enfant ou le composant lui-même.

Une utilisation peut être lorsque vous avez plusieurs images dans Canvas et que vous souhaitez faire glisser des images à l'intérieur du composant, mais Canvas. Vous pouvez ajouter un écouteur sur Canvas et dans cet écouteur, vous pouvez écrire le code suivant pour vous assurer que Canvas ne sera pas glissé.

function dragImageOnly(e:MouseEvent):void
{
    if(e.target==e.currentTarget)
    {
        return;
     }
     else
     {
        Image(e.target).startDrag();
     }
}
Asad
la source
3
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.
Muthukrishnan Kandasamy
la source
2
  • e.target est un élément sur lequel vous cliquez
  • e.currentTarget est un élément avec un écouteur d'événements ajouté.

Si vous cliquez sur l'élément enfant du bouton, il est préférable d'utiliser currentTarget pour détecter les attributs des boutons, dans CH, il est parfois difficile d'utiliser e.target.

Marcel GJS
la source
0

e.currentTarget est l'élément (parent) où l'événement est enregistré, e.target est le nœud (enfants) vers lequel l'événement pointe.

Samyak Jain
la source