por lo que tengo entendido :
THIS
el objeto this
representa normalmente el elemento en el cual se verifico un evento, aunque no siempre sea verdad, como veremos en la explicacion del event.target
. y ademas este objeto no te permite tener informaciones especificas.
EVENT.TARGET
El DOM se espera que a cada administrador de eventos le venga pasado como parametro el objeto event
que contiene informaciones sobre el mismo.
Algunas de estas informaciones son genericas, osea que estan presentes en cualquier tipo de evento, otras son especificas para el particular evento.
En este caso una de las propriedades del evento es el .target
, que tambien representa el elemento en el cual se verifico el evento, de manera independiente a otros factores como por ejemplo el flujo de los eventos y por lo tanto con mayores garantías respecto al objeto this
.
en pocas palabras
this
se refiere al elemento al cual el administrador de eventos esta
asociado
evet.target
se refiere al elemento en el cual nace el evento.
ejemplo:
$("div").click(function(e) {
console.log(this);
console.log(e.target);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> haz click en los dos "CLICK ME" para apreciar la diferencia y ver como <strong>e.target</strong> cambia, mientras el <strong> this </strong> sigue siendo el DIV</div>
<div> <p> <strong><span>CLICK ME (span)</span></strong><br/><br/>CLICK ME (paragrafo)</p></div>
en este caso se ve que :
si se asocia el evento a "contenedor" o "elemento padre" el this
corresponde al mismo, mientras event.target
corresponde al elemento hijo donde se produjo el click (en el caso del ejemplo el <span></span>
).
espero que sea de ayuda