web-dev-qa-db-fra.com

Différence entre e.target et e.currentTarget

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

Tous les exemples de quand utiliser l'un ou l'autre seraient appréciés.

actionscript-3eventsevent-handling
224
Artemix

Ben a parfaitement raison dans sa réponse - alors garde en tête ce qu'il dit. Ce que je vais 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 en relation avec les événements de souris et la liste d’affichage:

e.target = La chose sous la souris (comme le 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.target sera l'un des 10 boutons et e.currentTarget sera toujours le clip "btns".

Il est à noter que si vous modifiez MouseEvent en ROLL_OVER ou définissez la propriété btns.mouseChildren sur false, e.target et e.currentTarget seront toujours "btns".

187
Zevan

e.target est ce qui déclenche le déclencheur d'événements et e.currentTarget ce à quoi vous avez affecté votre écouteur. 

371
Ben Gale

e.currentTarget est toujours l'élément auquel l'événement est réellement lié. e.target est l'élément à l'origine de l'événement, donc e.target peut être un enfant de e.currentTarget, ou e.target peut être === e.currentTarget, en fonction de la structure de votre balisage.

20
Alex K

J'aime les réponses visuelles. 

 enter image description here

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

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

13
Maria Ines Parnisari

Il est intéressant de noter que event.target peut être utile, par exemple, pour utiliser un seul auditeur pour déclencher différentes actions. Supposons que vous ayez le "menu" typique Sprite 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éclencher une action différente dans doAction (event) en fonction de event.target (en utilisant la propriété name, etc ...)

8
Cay

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 «true» et «true» seront affichés!

4
Yuan Zhaohao

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

Par ailleurs, e.target peut être le composant lui-même ou tout enfant direct, petit-enfant ou arrière-petit-enfant, etc., 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 qui doit figurer dans la hiérarchie des enfants ou dans le composant lui-même.

Une utilisation possible 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 déplacé.

function dragImageOnly(e:MouseEvent):void
{
    if(e.target==e.currentTarget)
    {
        return;
     }
     else
     {
        Image(e.target).startDrag();
     }
}
3
Asad
  • e.target est un élément que vous f.e. Cliquez sur
  • 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 attributs des boutons. Dans CH, il est parfois difficile d'utiliser e.target.

2
Marcel GJS

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

0
Samyak Jain
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.
0
Muthukrishnan Kandasamy