Differenza tra e.target e e.currentTarget

Non capisco la differenza, sembrano entrambi uguali ma suppongo che non lo siano.

Ogni esempio di quando usare l'uno o l'altro sarebbe apprezzato.

Ben ha perfettamente ragione nella sua risposta, quindi tieni a mente ciò che dice. Quello che sto per dirti non è una spiegazione completa, ma è un modo molto semplice per ricordare come e.target, e.currentTargetlavorare in relazione agli eventi del mouse e all'elenco di visualizzazione:

e.target= La cosa sotto il mouse (come dice Ben ... la cosa che innesca l'evento). e.currentTarget= La cosa prima del punto ... (vedi sotto)

Quindi se hai 10 pulsanti all'interno di una clip con un nome di istanza di "btns" e lo fai:

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.targetsarà uno dei 10 pulsanti e e.currentTargetsarà sempre la clip "btns".

Vale la pena di notare che se è stato modificato il MouseEvent ad un ROLL_OVER o imposta la proprietà btns.mouseChildrensu false, e.targete e.currentTargetsaranno entrambi sempre "Btns".

e.targetè ciò che innesca l'attivazione del dispatcher di eventi ed e.currentTargetè ciò a cui hai assegnato il tuo ascoltatore.

e.currentTargetè sempre l'elemento a cui l'evento è effettivamente associato. e.targetè l'elemento da cui ha avuto origine l'evento, quindi e.targetpotrebbe essere un figlio e.currentTargeto e.targetpotrebbe essere === e.currentTarget, a seconda di come è strutturato il markup.

Mi piacciono le risposte visive.

Quando fai clic #btn, vengono chiamati due gestori di eventi che generano ciò che vedi nell'immagine.

Demo qui: https://jsfiddle.net/ujhe1key/

Vale la pena notare che event.target può essere utile, ad esempio, per l'utilizzo di un singolo listener per attivare azioni diverse. Supponiamo che tu abbia il tipico "menu" sprite con 10 pulsanti all'interno, quindi invece di fare:

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

Puoi semplicemente fare:

menu.addEventListener(MouseEvent.CLICK, doAction);

E attiva un'azione diversa all'interno di doAction (evento) a seconda dell'evento.target (usando la sua proprietà name, ecc ...)

fai un esempio:

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

quando fai clic su "btn", appariranno "true" e "true"!

e.currentTarget restituisce sempre il componente su cui viene aggiunto il listener di eventi.

D'altra parte, e.target può essere il componente stesso o qualsiasi figlio diretto o nipote o nipote e così via che hanno ricevuto l'evento. In altre parole, e.target restituisce il componente che si trova in cima alla gerarchia dell'elenco di visualizzazione e deve trovarsi nella gerarchia figlio o nel componente stesso.

Un uso può essere quando si hanno più immagini in Canvas e si desidera trascinare le immagini all'interno del componente tranne Canvas. Puoi aggiungere un listener su Canvas e in quel listener puoi scrivere il seguente codice per assicurarti che Canvas non venga trascinato.

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

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.

• e.target è un elemento, su cui fai clic
• e.currentTarget è un elemento con listener di eventi aggiunto.

Se fai clic sull'elemento figlio del pulsante, è meglio usare currentTarget per rilevare gli attributi dei pulsanti, in CH a volte è difficile usare e.target.

e.currentTarget è un elemento (padre) in cui è registrato l'evento, e.target è un nodo (figlio) a cui punta l'evento.