Qual è la differenza esatta tra la proprietà currentTarget e la proprietà target in javascript

Qualcuno può dirmi la differenza esatta tra currentTarget e targetproprietà negli eventi Javascript con esempio e quale proprietà viene utilizzata in quale scenario?

Fondamentalmente, gli eventi si gonfiano per impostazione predefinita, quindi la differenza tra i due è:

• target è l'elemento che ha attivato l'evento (ad esempio, l'utente ha fatto clic su)
• currentTarget è l'elemento a cui è collegato il listener di eventi.

Vedi una semplice spiegazione su questo post del blog .

target = elemento che ha attivato l'evento.

currentTarget = elemento che ha il listener di eventi.

Esempio eseguibile minimo

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>

Se fai clic su:

2 click me as well

quindi lo 1ascolta e aggiunge il risultato:

target: 2
currentTarget: 1

perché in quel caso:

• 2 è l'elemento che ha originato l'evento
• 1 è l'elemento che ha ascoltato l'evento

Se fai clic su:

1 click me

invece, il risultato è:

target: 1
currentTarget: 1

Testato su Chromium 71.

Se questo non si attacca, prova questo:

corrente in si currentTargetriferisce al presente. È l'obiettivo più recente che ha catturato l'evento che è scoppiato altrove.

<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>

Se fai clic sul tag P nel codice sopra, otterrai tre avvisi e se fai clic sul tag div otterrai due avvisi e un singolo avviso facendo clic sul tag del modulo. E ora vedi il seguente codice,

<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>

[oggetto HTMLParagraphElement] [oggetto HTMLDivElement]

Qui event.target è [oggetto HTMLParagraphElement] e event.curentTarget è [oggetto HTMLDivElement]: So

event.target è il nodo da cui ha avuto origine l'evento, e event.currentTarget, al contrario, si riferisce al nodo a cui era collegato il listener di eventi corrente. Per saperne di più, vedi bubbling

Qui abbiamo cliccato sul tag P ma non abbiamo ascoltatore su P ma sul div dell'elemento genitore.

event.target è il nodo da cui ha avuto origine l'evento, ad es. ovunque posizioniate il listener di eventi (su paragrafo o span), event.target si riferisce al nodo (dove l'utente ha fatto clic).

event.currentTarget , al contrario, si riferisce al nodo a cui era collegato il listener di eventi correnti. Vale a dire. se abbiamo collegato il nostro listener di eventi sul nodo del paragrafo, allora event.currentTarget si riferisce al paragrafo mentre event.target si riferisce ancora allo span. Nota: se abbiamo anche un listener di eventi sul corpo, allora per questo listener di eventi, event.currentTarget si riferisce al corpo (cioè l'evento fornito come input per gli ascoltatori di eventi viene aggiornato ogni volta che l'evento fa gorgogliare un nodo).