Was ist der genaue Unterschied zwischen der Eigenschaft currentTarget und der Eigenschaft target in Javascript?

Kann mir bitte jemand anhand eines Beispiels den genauen Unterschied zwischen currentTargetund targetEigenschaft in Javascript-Ereignissen mitteilen und welche Eigenschaft in welchem ​​Szenario verwendet wird?

Grundsätzlich sprudeln Ereignisse standardmäßig, sodass der Unterschied zwischen beiden wie folgt ist:

• target ist das Element, das das Ereignis ausgelöst hat (z. B. der Benutzer hat darauf geklickt)
• currentTarget ist das Element, an das der Ereignis-Listener angehängt ist.

Eine einfache Erklärung finden Sie in diesem Blogbeitrag .

target = Element, das das Ereignis ausgelöst hat.

currentTarget = Element, das den Ereignis-Listener hat.

Minimal lauffähiges Beispiel

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>

Wenn Sie auf klicken:

2 click me as well

1hört dann zu und hängt an das Ergebnis:

target: 2
currentTarget: 1

weil in diesem Fall:

• 2 ist das Element, das das Ereignis ausgelöst hat
• 1 ist das Element, das das Ereignis gehört hat

Wenn Sie auf klicken:

1 click me

Stattdessen lautet das Ergebnis:

target: 1
currentTarget: 1

Getestet auf Chrom 71.

Wenn dies nicht klebt, versuchen Sie Folgendes:

Strom in currentTargetbezieht sich auf die Gegenwart. Es ist das jüngste Ziel, das das Ereignis erfasst hat, das von anderswoher aufgetaucht ist.

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

Wenn Sie im obigen Code auf das P-Tag klicken, erhalten Sie drei Warnungen. Wenn Sie auf das div-Tag klicken, erhalten Sie zwei Warnungen und eine einzelne Warnung, wenn Sie auf das Formular-Tag klicken. Und jetzt sehen Sie den folgenden Code:

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

[Objekt HTMLParagraphElement] [Objekt HTMLDivElement]

Hier ist event.target [Objekt HTMLParagraphElement] und event.curentTarget ist [Objekt HTMLDivElement]: Also

event.target ist der Knoten, von dem das Ereignis stammt, und event.currentTarget hingegen bezieht sich auf den Knoten, an den der Listener für aktuelle Ereignisse angehängt wurde. Weitere Informationen finden Sie unter Bubbling

Hier haben wir auf das P-Tag geklickt, aber wir haben keinen Listener für P, sondern für das übergeordnete Element div.

event.target ist der Knoten, von dem das Ereignis stammt, d. h. Überall dort, wo Sie Ihren Ereignis-Listener platzieren (auf Absatz oder Spanne), bezieht sich event.target auf den Knoten (auf den der Benutzer geklickt hat).

event.currentTarget hingegen bezieht sich auf den Knoten, an den der Listener für aktuelle Ereignisse angehängt wurde. Dh. Wenn wir unseren Ereignis-Listener an den Absatzknoten angehängt haben, bezieht sich event.currentTarget auf Absatz, während event.target immer noch auf span verweist. Hinweis: Wenn wir auch einen Ereignis-Listener im Body haben, bezieht sich event.currentTarget für diesen Event-Listener auf body (dh das Ereignis, das als Eingabe für Event-Listener bereitgestellt wird, wird jedes Mal aktualisiert, wenn das Ereignis einen Knoten sprudelt).