7

Tengo este simple script que captura un evento de un botón con jQuery:

$(function() {
  $('#myButton').click(function(evt) {
    console.log(evt);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton" type="button">
  Enviar
</button>

La variable evt al ser mostrada en la consola tiene varias propiedades llamadas:

  • target
  • currentTarget
  • delegateTarget
  • relatedTarget

Todas ellas excepto relatedTarget hacen referencia al mismo objeto, el botón que generó el evento. ¿Sabe alguien cuál es la diferencia entre ellas? Si todas apuntan al mismo objeto, ¿por qué jQuery las usa?.

2 respuestas 2

8

target: Hace referencia al elemento objeto sobre el cuál ha se ha asignado el evento. Tomando en cuenta una estructura como la siguiente:

<div class="box">
    <span>Texto aquí</span>
</div>

y el código siguiente:

$('.box').click(...);

Al dar clic en el span el evento se activa pues se debe al tal efecto burbuja (más información en: Eventos bubbling y JQuery - Arquitectura Java), en ese momento el objetivo actual del clic (el currentTarget) es el span, pero el objetivo como tal (target) es el div.

Burbuja de eventos - JavaScript

El relatedTarget actúa de la misma forma pero está disponible para objetos que delegan su evento como lo vemos a continuación:

<div class="box">
    <span>Texto aquí</span>
</div>

el código jQuery quedaría:

$('.box').on('click', 'span', function(evt){...});

El delegateTarget es el div.box. Es importante mencionar que para elementos no delegados: delegateTarget será siempre igual a currentTarget.

1
  • hola, estaba leyendo tu respuesta y en ese momento el objetivo actual del clic (el currentTarget ) es el span, pero el objetivo como tal ( target ) es el div entra en contradicción con w3schools. También: El relatedTarget actúa de la misma forma pero está disponible para objetos que delegan su evento, ahí tal vez te referías a delegateTarget? podrías por favor explicarlo un poco para saber por qué las inconsistencias entre tu respuesta y w3schools. gracias Commented el 2 may. 2018 a las 15:00
3

Bueno según la MDN (Mozilla developer Network) Dice lo siguiente:

event.target: El Elemento del DOM, que ha desencadenado un evento.

event.currentTarget: Siempre se refiere al elemento del event Handler (Manejador de Eventos) que ha sido atachado a un event.target especifico, este identifica el elemento en el que se produjo el evento.

event.relatedTarget: Identifica un target secundario para el evento, esto lo puedes ver cuando trabajas con los eventos del Mouse.

event.delegateTarget: Contiene el elemento que esta en progreso de ejecución, esto se utiliza cuando trabajamos con .on() para conocer quien invoco el evento.

Recursos

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.