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

¿Alguien puede decirme la diferencia exacta entre currentTargety la targetpropiedad en los eventos de Javascript con un ejemplo y qué propiedad se utiliza en qué escenario?

Básicamente, los eventos burbujean por defecto, por lo que la diferencia entre los dos es:

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

Vea una explicación simple en esta publicación de blog .

target = elemento que activó el evento.

currentTarget = elemento que tiene el detector de eventos.

Ejemplo ejecutable 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 click me
  <div id="2">2 click me as well</div>
</div>
<div id="result">
  <div>result:</div>
</div>

Si hace clic en:

2 click me as well

luego lo 1escucha y agrega el resultado:

target: 2
currentTarget: 1

porque en ese caso:

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

Si hace clic en:

1 click me

en cambio, el resultado es:

target: 1
currentTarget: 1

Probado en cromo 71.

Si esto no se pega, intente esto:

corriente en se currentTargetrefiere al presente. Es el objetivo más reciente que captó el evento que surgió de otros lugares.

<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 hace clic en la etiqueta P en el código anterior, recibirá tres alertas, y si hace clic en la etiqueta div, recibirá dos alertas y una sola alerta al hacer clic en la etiqueta del formulario. Y ahora mira 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>

[objeto HTMLParagraphElement] [objeto HTMLDivElement]

Aquí event.target es [object HTMLParagraphElement], y event.curentTarget es [object HTMLDivElement]: Entonces

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 corriente de evento se attached.To saber más ver burbujeo

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

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

event.currentTarget , por el contrario, se refiere al nodo en el que se conectó el detector de eventos actual. Es decir. si adjuntamos nuestro detector de eventos en el nodo de párrafo, event.currentTarget se refiere al 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 detector de eventos, event.currentTarget se refiere al cuerpo (es decir, el evento proporcionado como entrada para los receptores de eventos se actualiza cada vez que el evento burbujea un nodo hacia arriba).