actionscript-3 events event-handling

actionscript 3 - Diferencia entre e.target y e.currentTarget



actionscript-3 events (10)

Me gustan las respuestas visuales.

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

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

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.


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

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 event.target (usando su nombre de propiedad, etc ...)


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


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

Por otro lado, e.target puede ser el componente en sí mismo o cualquier niño directo, nieto o bisnieto, etc. que haya recibido 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 el componente en sí.

Un uso puede ser cuando tiene varias imágenes en Canvas y desea arrastrar imágenes dentro del componente pero Canvas. Puedes agregar un detector en Canvas y en ese escucha puedes escribir el siguiente código para asegurarte de que Canvas no se arrastre.

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


hacer 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 );

al hacer clic en ''btn'', aparecerán ''true'' y ''true''!


e.currentTarget es siempre el elemento al que el evento está realmente vinculado. e.target es el elemento del que se originó el evento, por lo que e.target podría ser un elemento secundario de e.currentTarget , o e.target podría ser === e.currentTarget , según cómo esté estructurado su marcado.


e.target es lo que activa el dispatcher del evento y e.currentTarget es lo que asignó a su oyente.


Ben tiene toda la respuesta correcta, así que ten en cuenta lo que dice. Lo que voy a decirles no es una explicación completa, pero es una manera muy fácil de recordar cómo funcionan e.target , e.currentTarget 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 más 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 cambió el MouseEvent a un ROLL_OVER o si configura la propiedad btns.mouseChildren como falso, e.target y e.currentTarget siempre serán "btns".


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 puedes hacer 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 los atributos de los botones, en CH a veces es un problema utilizar e.target.