Diferencia entre e.target y e.currentTarget

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

Se agradecerá cualquier ejemplo de cuándo usar uno u otro.

Ben tiene toda la razón en su respuesta, así que tenga en mente lo que dice. Lo que voy a contarte 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 = Lo que estaba antes del punto … (ver a continuación)

Entonces, si tiene 10 botones dentro de un clip con un nombre de instancia de “btns”, debe:

 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 MouseEvent a ROLL_OVER o estableciste la propiedad btns.mouseChildren en false, e.target y e.currentTarget siempre serán “btns”.

e.target es lo que activa el despachador de eventos y e.currentTarget es lo que asignó a su oyente.

e.currentTarget es siempre el elemento que el evento está realmente obligado a hacer. 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 , dependiendo de cómo esté estructurado su marcado.

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

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

Simplemente puede 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 …)

Me gustan las respuestas visuales.

enter image description here

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

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

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 hagas clic en ‘btn’, aparecerán ‘verdadero’ y ‘verdadero’.

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

Por otro lado, e.target puede ser el componente en sí 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 se encuentra 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 Imagen en Lienzo y desea arrastrar Imágenes dentro del componente, pero Lienzo. Puede agregar un oyente en el canvas y en ese oyente puede escribir el siguiente código para asegurarse de que Canvas no se arrastre.

 function dragImageOnly(e:MouseEvent):void { if(e.target==e.currentTarget) { return; } else { Image(e.target).startDrag(); } } 
  • e.target es un elemento, que puedes hacer clic
  • e.currentTarget es un elemento con un agente de escucha añadido.

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

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