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.
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.
Respuestas:
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.currentTarget
trabajar 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.target
será uno de los 10 botones y e.currentTarget
siempre será el clip "btns".
Vale la pena señalar que si cambiaste el MouseEvent a ROLL_OVER o estableciste la propiedad btns.mouseChildren
en false, e.target
y e.currentTarget
ambos siempre serán "btns".
currentTarget
siempre el objeto está escuchando el evento; target
es el objetivo real que recibió el evento. Por evento de burbujeo, el objetivo recibe el evento y aparece la lista de visualización. (O al revés para la captura de eventos)
e.target
es lo que activa el despachador de eventos para que se active y e.currentTarget
es lo que asignó a su oyente.
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.
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.