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

Question

Kann mir bitte jemand den genauen Unterschied zwischen currentTarget y target Eigenschaft in JavaScript-Ereignissen mit Beispiel und welche Eigenschaft wird in welchem Szenario verwendet?

Answer 1

Veranstaltungen Blase standardmäßig. Der Unterschied zwischen den beiden ist also:

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

Answer 2

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

currentTarget = Element, das den Ereignis-Listener hat.

Answer 3

Minimales 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

dann 1 hört es sich an und fügt es an das Ergebnis an:

target: 2
currentTarget: 1

denn in diesem Fall:

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

Wenn Sie auf klicken:

1 click me

stattdessen ist das Ergebnis:

target: 1
currentTarget: 1

Getestet mit Chrom 71.

Answer 4

Für Ereignisse, deren Luftblasen-Eigenschaft ist true sprudeln sie.

Die meisten Ereignisse blubbern, außer einigen, nämlich Fokus , Unschärfe , mouseenter , mouseleave , ...

Wenn ein Ereignis evt Blasen, die evt.currentTarget wird in den aktuelles Ziel in seinem blubbernden Weg, während die evt.target behält den gleichen Wert wie das ursprüngliche Ziel, das das Ereignis ausgelöst hat.

Es ist erwähnenswert, dass, wenn Ihr Ereignis-Handler (eines Ereignisses, das sprudelt) asynchron ist und der Handler die evt.currentTarget . currentTarget sollte lokal zwischengespeichert werden, da das Ereignisobjekt in der Bubbling-Kette wiederverwendet wird ( codepen ).

const clickHandler = evt => {
  const {currentTarget} = evt // cache property locally
  setTimeout(() => {
    console.log('evt.currentTarget changed', evt.currentTarget !== currentTarget)
  }, 3000)
}

Wenn Sie React verwenden, fällt ab v17 die Pooling von Ereignissen .

Daher wird das Ereignisobjekt im Handler aufgefrischt und kann sicher in asynchronen Aufrufen verwendet werden ( codepen ).

ist nicht immer wahr. onClick der Veranstaltung currentTarget ist undefined nachdem der Event-Handler beendet wurde. Zum Schluss, immer die Eigenschaften des Ereignisses lokal zwischenspeichern, wenn Sie sie nach einem synchronen Aufruf verwenden wollen.

De Reaktordokumente

Anmerkung:

Ab Version 17 bewirkt e.persist() nichts, weil das SyntheticEvent nicht mehr gepoolt ist.

Und viele andere Dinge, die zu lang sind, um sie in eine Antwort einzufügen, also habe ich sie zusammengefasst und zu einen Blogbeitrag hier .

Answer 5

Wenn das nicht klappt, versuchen Sie dies:

aktuell en currentTarget bezieht sich auf die Gegenwart. Es ist das jüngste Ziel, das das Ereignis, das von anderswo her aufgestiegen ist, aufgefangen hat.