Qual é a diferença exata entre a propriedade currentTarget e a propriedade target em javascript

Alguém pode me dizer a diferença exata entre currentTargete targetpropriedade nos eventos Javascript com exemplo e qual propriedade é usada em qual cenário?

Basicamente, os eventos borbulham por padrão, portanto a diferença entre os dois é:

• target é o elemento que acionou o evento (por exemplo, o usuário clicou)
• currentTarget é o elemento ao qual o ouvinte de evento está anexado.

Veja uma explicação simples nesta postagem do blog .

target = elemento que acionou o evento.

currentTarget = elemento que possui o ouvinte de evento.

Exemplo mínimo executável

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 você clicar em:

2 click me as well

então 1ouve e anexa ao resultado:

target: 2
currentTarget: 1

porque nesse caso:

• 2 é o elemento que originou o evento
• 1 é o elemento que ouviu o evento

Se você clicar em:

1 click me

em vez disso, o resultado é:

target: 1
currentTarget: 1

Testado no Chromium 71.

Se isso não persistir, tente o seguinte:

corrente em currentTargetrefere-se ao presente. É o alvo mais recente que capturou o evento que borbulhou de outros 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>

Se clicar na tag P no código acima, você receberá três alertas e, se clicar na tag div, receberá dois alertas e um único alerta ao clicar na tag do formulário. E agora veja o código a seguir,

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

Aqui event.target é [objeto HTMLParagraphElement] e event.curentTarget é [objeto HTMLDivElement]: Então

event.target é o nó do qual o evento se originou e event.currentTarget, pelo contrário, refere-se ao nó no qual o ouvinte de evento atual foi anexado. Para saber mais, consulte bubbling

Aqui clicamos na tag P, mas não temos ouvinte em P, mas no elemento pai div.

event.target é o nó do qual o evento se originou, ou seja. onde quer que você coloque seu ouvinte de evento (no parágrafo ou período), event.target se refere ao nó (onde o usuário clicou).

event.currentTarget , pelo contrário, refere-se ao nó no qual o ouvinte de evento atual foi anexado. Ou seja. se anexamos nosso ouvinte de evento no nó do parágrafo, event.currentTarget se refere ao parágrafo enquanto event.target ainda se refere à extensão. Nota: se também tivermos um ouvinte de evento no corpo, para este ouvinte de evento, event.currentTarget se refere ao corpo (ou seja, o evento fornecido como entrada para os listerners de eventos é atualizado sempre que um evento estiver borbulhando em um nó).