¿Cuál es la diferencia exacta entre la propiedad currentTarget y la propiedad de destino en javascript

Question

¿Puede alguien decirme la diferencia exacta entre currentTarget y target propiedad en eventos de Javascript con el ejemplo y qué propiedad se utiliza en qué escenario?

Answer 1

Básicamente, events bubble por defecto por lo que la diferencia entre los dos es:

• target es el elemento que desencadenó el evento (por ejemplo, el usuario hizo clic en)
• currentTarget es el elemento que el detector de eventos está unido a.

Consulte una explicación simple en este blog post.

Answer 2

target = elemento que desencadenó el evento.

currentTarget = elemento que escucha el evento.

Answer 3

Si esto no se está pegando, intente esto:

actual en currentTarget se refiere al presente. Es el objetivo más reciente que atrapó el evento que surgió de otros lugares.

Answer 4

ejemplo Mínimo

window.onload = function() { 
 
    var resultElem = document.getElementById('result') 
 
    document.getElementById('1').addEventListener(
 
    'click', 
 
    function(event) { 
 
     resultElem.innerHTML += ('<div>target: ' + event.target.id + '</div>') 
 
     resultElem.innerHTML += ('<div>currentTarget: ' + event.currentTarget.id + '</div>') 
 
    }, 
 
    false 
 
) 
 
    document.getElementById('2').dispatchEvent(
 
      new Event('click', { bubbles:true })) 
 
}

<div id="1">1 
 
    <div id="2">2 
 
    </div> 
 
</div> 
 
<div id="result"> 
 
    <div>result:</div> 
 
</div>

Cuando se hace clic y se enumeran a 1 en 2, el resultado es:

target: 2 
currentTarget: 1 

porque en ese caso:

• 2 es el elemento que originó el evento
• 1 es el elemento que escuchó el evento

Answer 5

event.target es el nodo desde el que se originó el evento, es decir. donde quiera que coloque el oyente de su evento (en el párrafo o el lapso), event.target se refiere al nodo (donde el usuario hizo clic).

event.currentTarget, en el lado opuesto, se refiere al nodo en el que se adjuntó el detector de eventos actuales. Es decir. si adjuntamos nuestro oyente de evento en el nodo de párrafo, event.currentTarget se refiere a un párrafo mientras event.target todavía se refiere a span. Nota: si también tenemos un detector de eventos en el cuerpo, entonces para este evento-oyente, event.currentTarget se refiere al cuerpo (es decir, el evento proporcionado como entrada a event-listerners se actualiza cada vez que el evento burbujea un nodo).

Answer 6

<style> 
 
    body * { 
 
    margin: 10px; 
 
    border: 1px solid blue; 
 
    } 
 
</style> 
 

 
<form onclick="alert('form')">FORM 
 
    <div onclick="alert('div')">DIV 
 
    <p onclick="alert('p')">P</p> 
 
    </div> 
 
</form>

Si clic en la etiqueta P en el código anterior por lo que recibirá tres de alerta, y si se hace clic en la etiqueta div obtendrá dos alerta y una sola alerta al hacer clic en el formulario etiqueta. Y ahora ver el siguiente código,

<style> 
 
    body * { 
 
    margin: 10px; 
 
    border: 1px solid blue; 
 
    } 
 
</style> 
 
<script> 
 
function fun(event){ 
 
    alert(event.target+" "+event.currentTarget); 
 
} 
 

 
</script> 
 

 
<form>FORM 
 
    <div onclick="fun(event)">DIV 
 
    <p>P</p> 
 
    </div> 
 
</form>

simplemente retiramos onclick de la etiqueta P y forma, y ​​ahora, cuando hacemos clic que en la etiqueta P obtenemos sólo una alerta:

[ oponerse HTMLParagraphElement] [HTMLDivElement objeto]

Aquí event.target es [HTMLParagraphElement objeto], y event.curentTarget es [objeto HTMLDivElement]: Así

event.target es el nodo desde el que se originó el evento, y event.currentTarget, por el contrario, se refiere al nodo en el que oyente actual de eventos fue attached.To saber más see bubbling

Aquí hicimos clic en la etiqueta P, pero no tenemos listener en P sino en su elemento padre div.