4

En este código obtengo el id del botón de dos maneras:

  • this.id
  • e.target.id

var button = document.getElementById("btnEnviar");
button.addEventListener("click",function(e){
    console.log(this.id);
    console.log(e.target.id);
},false);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" integrity="sha256-dMQYvN6BU9M4mHK94P22cZ4dPGTSGOVP41yVXvXatws=" crossorigin="anonymous" />
<h3 class="subtitle is-3">Prueba <code>this</code> vs <code>e.target</code></h3>

<a class="button is-primary" id="btnEnviar">Click Aquí</a>

Algunas veces veo que se usa una u otra forma y quiero saber si es lo mismo o hay alguna diferencia. En caso de que sean diferentes, quisiera saber si hay recomendaciones concretas o casos en que haya que usar una u otra.

4 respuestas 4

5

En ese caso puntual son lo mismo porque se da que el target es el botton, y this hace referencia al botón, pero son dos cosas totalmente diferentes.

e es objeto que represetna el evento, y uno de sus atributos es el target, que viene a ser el elemento que recibió el evento. (En este caso el botón).

this es complicado...
Lo que this representa cambia dependiendo de donde se usa.

Ver this en MDN

4
  • Según dices entonces ¿en este caso sería más específico e.target para referirse al botón?
    – A. Cedano
    Commented el 27 ene. 2019 a las 9:14
  • @A.Cedano depende, en el caso que pusiste vos como ejemplo el e.target funciona al igual que el this, porque el listener lo tenes en el botón y el evento nace en el mismo, mete el caso que le agregues un Ícono al botón por ej De font awesome, en ese caso el this es mejor porque si le das click al icono el e.this va a ser el icono y no el botón, en mi respuesta tenes un ejemplo vanal de la diferencia
    – Federico
    Commented el 27 ene. 2019 a las 9:22
  • Gracias @Federico. No me había dado cuenta de la diferencia en tu código. Creo que deberías poner algún texto fuera de <span> </span> donde se indique que se haga clic para poder apreciar la diferencia. Esas partes están activas (yo hice clic a la derecha del texto y vi la diferencia) pero de entrada uno no se da cuenta.
    – A. Cedano
    Commented el 27 ene. 2019 a las 9:43
  • No es más específico solo coinciden. Para mí como el handler está sobre el botón, me hace más sentido usar this que el evento. Usaría el evento en una función mas general donde recibo eventos de diferentes elementos y necesito identificar de donde viene para determinar que hacer luego.
    – Juan
    Commented el 27 ene. 2019 a las 12:53
3

Primero un poco de teoría:

  • this podría definirse no como un objeto, sino como contexto donde se ejecutan instrucciones; por defecto, es window, pero puede ser otra cosa muy diferente como el objeto que dispara un evento u otro, generado por intervalos (setInterval o setTimeout), seguramente se me escapan otros casos, pero en el ejemplo del final podemos ilustrar con base en tu código original y algunos extra
  • Cada función (excepto flecha) puede generar un contexto propio que será asignado a this y habrá ocasiones en que este deba ser enlazado, pero es un tema extenso y te recomiendo leer esta pregunta para ver de qué se trata
  • Las funciones flecha no generan un contexto propio, tomando el mismo en el que fueron definidas
  • event.target es el elemento que dispara un evento, pero no necesariamente el que se usó para definirlo
  • event.currentTarget sí hace referencia al elemento que se usó para definir el evento, este es mucho más preciso y fiable que this o event.target, por supuesto, dependiendo del contexto y del caso en específico.

Para tratar de entender esto un poco mejor, hay que probar otras opciones.

let btn1 = document.getElementById("btnEnviar");
let btn2 = document.getElementById("btnSpan");
let btn3 = document.getElementById("btnFlecha");

btn1.addEventListener("click", function(e){
    console.log(this.id); // Con función normal el contexto es el enlace
    console.log(e.currentTarget.id); // También el enlace
    console.log(e.target.id); // No hay hijos, es el enlace
},false);

btn2.addEventListener("click", function(e){
    console.log(this.id); // Con función normal el contexto es el enlace
    console.log(e.currentTarget.id); // También el enlace
    console.log(e.target.id); // Hay hijo, esto no es preciso
},false);

btn3.addEventListener("click", e => {
    console.log(this.id); // Con función flecha el contexto es la ventana, ID no definido
    console.log(e.currentTarget.id); // También el enlace
    console.log(e.target.id); // No hay hijos, es el enlace
},false);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" integrity="sha256-dMQYvN6BU9M4mHK94P22cZ4dPGTSGOVP41yVXvXatws=" crossorigin="anonymous" />
<h3 class="subtitle is-3">Prueba <code>this</code> vs <code>e.currentTarget</code> vs <code>e.target</code></h3>

<a class="button is-primary" id="btnEnviar">Click Aquí</a>
<a class="button is-primary" id="btnSpan"><span id="no-es-boton">Este es diferente</span></a>
<a class="button is-primary" id="btnFlecha">Con función flecha</a>

En resumen, no es que uno sea mejor que otro, elige qué usar dependiendo del caso:

  • Puedes usar this para obtener el elemento al que fue asignado el evento, siempre y cuando no se trate de una función flecha
  • Usar event.currentTarget siempre te va a devolver el elemento al que se asignó el evento, independientemente de que tenga hijos o no
  • event.target debería ser usado solo si el elemento no tiene hijos o en caso de que quieras saber cuál de los hijos disparó el evento
1

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

0

Para que entiendas la diferencia, si en un button que tiene un span adentro. Pones que consologuee el event.target, si lo ejecutas presioando el span. Te va a devolver el span Pero si en cambio el evento del button consologuea "this" te va a devolver el botón sin importar que cliquees dentro del boton

event.target es el elemento por el cual se ejecutó el evento, en cambio this habla del contenedor de dicho evento

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.