Quelle est la différence exacte entre la propriété currentTarget et la propriété cible en javascript

Quelqu'un peut-il me dire la différence exacte entre currentTargetet la targetpropriété dans les événements Javascript avec exemple et quelle propriété est utilisée dans quel scénario?

Fondamentalement, les événements bouillonnent par défaut, la différence entre les deux est donc:

• target est l'élément qui a déclenché l'événement (par exemple, l'utilisateur a cliqué sur)
• currentTarget est l'élément auquel l'écouteur d'événement est attaché.

Voir une explication simple sur ce billet de blog .

target = élément qui a déclenché l'événement.

currentTarget = élément qui a l'écouteur d'événement.

Exemple exécutable minimal

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 vous cliquez sur:

2 click me as well

puis l' 1écoute et ajoute au résultat:

target: 2
currentTarget: 1

car dans ce cas:

• 2 est l'élément à l'origine de l'événement
• 1 est l'élément qui a écouté l'événement

Si vous cliquez sur:

1 click me

au lieu de cela, le résultat est:

target: 1
currentTarget: 1

Testé sur Chrome 71.

Si cela ne colle pas, essayez ceci:

actuel en currentTargetfait référence au présent. C'est la cible la plus récente qui a attrapé l'événement qui s'est propagé d'ailleurs.

<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 vous cliquez sur la balise P dans le code ci-dessus, vous obtiendrez trois alertes, et si vous cliquez sur la balise div, vous obtiendrez deux alertes et une seule alerte en cliquant sur la balise de formulaire. Et maintenant, voyez le code suivant,

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

[objet HTMLParagraphElement] [objet HTMLDivElement]

Ici event.target est [object HTMLParagraphElement], et event.curentTarget est [object HTMLDivElement]: Donc

event.target est le noeud à partir duquel l'événement est originaire, et event.currentTarget, au contraire, se réfère au noeud sur lequel écouteur-événement en cours a été attached.To savoir plus voir barbotage

Ici, nous avons cliqué sur la balise P mais nous n'avons pas d'écouteur sur P mais sur son élément parent div.

event.target est le nœud à l'origine de l'événement, c'est-à-dire. où que vous placiez votre écouteur d'événements (sur un paragraphe ou une étendue), event.target fait référence au nœud (où l'utilisateur a cliqué).

event.currentTarget , au contraire, fait référence au noeud auquel l'écouteur d'événements en cours a été attaché. C'est à dire. si nous avons attaché notre écouteur d'événements sur le nœud de paragraphe, alors event.currentTarget fait référence au paragraphe tandis que event.target fait toujours référence à span. Remarque: si nous avons également un écouteur d'événements sur le corps, alors pour cet écouteur d'événements, event.currentTarget fait référence au corps (c'est-à-dire que l'événement fourni en entrée aux listeurs d'événements est mis à jour à chaque fois que l'événement propulse un nœud vers le haut).