Différence entre e.target et e.currentTarget

Ben a complètement raison dans sa réponse – alors gardez ce qu’il a en tête. Ce que je suis sur le sharepoint vous dire n’est pas une explication complète, mais c’est un moyen très facile de se rappeler comment e.target , e.currentTarget fonctionne par rapport aux événements de la souris et à la liste d’affichage:

e.target = La chose sous la souris (comme ben le dit … 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 le nom d’instance “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.target sera l’un des 10 boutons et e.currentTarget sera toujours le clip “btns”.

Il convient de noter que si vous avez changé le MouseEvent en ROLL_OVER ou que vous définissez la propriété btns.mouseChildren sur false, e.target et e.currentTarget seront toujours les deux “btns”.

e.target est ce qui déclenche le déclenchement du répartiteur d’événements et e.currentTarget est ce que vous avez assigné à votre auditeur.

e.currentTarget est toujours l’élément auquel l’événement est lié. e.target est l’élément d’origine de l’événement, alors e.target pourrait être un enfant de e.currentTarget ou e.target pourrait être === e.currentTarget , selon la structure de votre balisage.

Il est à 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 typique “menu” 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 (event) en fonction de event.target (en utilisant sa propriété name, etc …)

J’aime les réponses visuelles.

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

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

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”, et que “true” et “true” apparaîtront!

e.currentTarget renvoie toujours le composant sur lequel le programme d’écoute d’événement est ajouté.

En revanche, e.target peut être le composant lui-même ou tout enfant, petit-enfant ou petit-enfant direct, etc., qui a reçu l’événement. En d’autres termes, e.target renvoie le composant qui se trouve en haut dans la hiérarchie de la liste d’affichage et doit se trouver dans la hiérarchie enfant ou le composant lui-même.

Une utilisation peut être lorsque vous avez plusieurs images dans le canevas et que vous souhaitez faire glisser des images dans le composant, à l’exception de Canvas. Vous pouvez append un écouteur sur Canvas et, dans cet écouteur, vous pouvez écrire le code suivant pour vous assurer que Canvas ne sera pas déplacé.

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

• e.target est un élément que vous cliquez
• e.currentTarget est un élément avec un écouteur d’événement ajouté.

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

e.currentTarget est un élément (parent) où l’événement est enregistré, e.target est le noeud (enfants) où l’événement pointe.