Diferencia entre e.target y e.currentTarget

No entiendo la diferencia, ambos parecen iguales pero supongo que no lo son.

Cualquier ejemplo de cuándo usar uno u otro sería apreciado.

Ben es completamente correcto en su respuesta, así que tenga en cuenta lo que dice. Lo que voy a decirte no es una explicación completa, pero es una manera muy fácil de recordar cómo e.target, e.currentTargettrabajar en relación con los eventos del mouse y la lista de visualización:

e.target= Lo que está debajo del mouse (como dice ben ... lo que desencadena el evento). e.currentTarget= La cosa antes del punto ... (ver abajo)

Entonces, si tiene 10 botones dentro de un clip con un nombre de instancia de "btns" y lo hace:

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.targetserá uno de los 10 botones y e.currentTargetsiempre será el clip "btns".

Vale la pena señalar que si cambiaste el MouseEvent a ROLL_OVER o estableciste la propiedad btns.mouseChildrenen false, e.targety e.currentTargetambos siempre serán "btns".

e.targetes lo que activa el despachador de eventos para que se active y e.currentTargetes lo que asignó a su oyente.

e.currentTargetes siempre el elemento que el evento está obligado a hacer. e.targetes el elemento del que se originó el evento, por lo que e.targetpodría ser hijo de e.currentTarget, o e.targetpodría ser === e.currentTarget, dependiendo de cómo esté estructurado el marcado.

Me gustan las respuestas visuales.

Cuando hace clic #btn, se llaman dos controladores de eventos y generan lo que ve en la imagen.

Demostración aquí: https://jsfiddle.net/ujhe1key/

Vale la pena señalar que event.target puede ser útil, por ejemplo, para usar un solo oyente para desencadenar diferentes acciones. Digamos que tiene el típico "menú" sprite con 10 botones dentro, así que en lugar de hacer:

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

Simplemente puedes hacer:

menu.addEventListener(MouseEvent.CLICK, doAction);

Y desencadenar una acción diferente dentro de doAction (evento) dependiendo del evento.target (usando su propiedad de nombre, etc.)

haz un ejemplo:

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

cuando haces clic en 'btn', aparecerán 'verdadero' y 'verdadero'.

e.currentTarget siempre devolverá el componente en el que se agrega el detector de eventos.

Por otro lado, e.target puede ser el componente mismo o cualquier hijo directo o nieto o bisnieto y así sucesivamente quién recibió el evento. En otras palabras, e.target devuelve el componente que está en la parte superior de la jerarquía de la Lista de visualización y debe estar en la jerarquía secundaria o en el componente mismo.

Un uso puede ser cuando tiene varias imágenes en Canvas y desea arrastrar imágenes dentro del componente pero Canvas. Puede agregar un oyente en Canvas y en ese oyente puede escribir el siguiente código para asegurarse de que Canvas no sea arrastrado.

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 es un elemento, en el que haces clic
• e.currentTarget es un elemento con un detector de eventos agregado.

Si hace clic en el elemento secundario del botón, es mejor usar currentTarget para detectar atributos de botones, en CH a veces es un problema usar e.target.

e.currentTarget es un elemento (padre) donde se registra el evento, e.target es un nodo (hijos) al que apunta el evento.