Diferencia entre e.target y e.currentTarget


277

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.


2
Este violín muestra la diferencia muy claramente
Murhaf Sousli, el

1
¿Alguien conoce ActionScript3 lo suficientemente bien como para confirmar que sus eventos se comportan igual que los eventos DOM?
Ben Creasy


Una referencia proporcionada por Murhaf Sousli es una explicación clara que responde a una pregunta de qué diferencia hay. Una pequeña versión simplificada de este violín sería la mejor respuesta.
azakgaim

Respuestas:


205

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".


2
En otras palabras, target son los childs y currentTarget son los contenedores.
Artemix

107
No, currentTargetsiempre el objeto está escuchando el evento; targetes 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)
toque

44
Si fue un niño el que envió el evento, entonces los objetivos son los niños. Normalmente querrá usar e.currentTarget ya que esto es lo que le asignó al oyente. Pero en situaciones, como la que Zevan mencionó anteriormente, donde desea un oyente en un contenedor con varios hijos, usaría e.target para ver cuál de los hijos envió el evento.
Ben Gale

el comentario de @poke anterior es la mejor respuesta "currentTarget siempre es el objeto que escucha, el objetivo es el objetivo real que recibió el evento"
PandaWood


28

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.



8

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.)


5

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'.


3

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();
     }
}

3
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.

2
  • 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.


0

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.