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

<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 auf das P-Tag im obigen Code klicken, erhalten Sie drei Warnungen, und wenn Sie auf das div-Tag klicken, erhalten Sie zwei Warnungen und eine einzelne Warnung beim Klicken auf das Formular-Tag. 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>

Wir haben gerade onclick aus dem P- und dem Formular-Tag entfernt, und wenn wir jetzt auf das P-Tag klicken, erhalten wir nur eine Meldung:

[object HTMLParagraphElement] [object HTMLDivElement]

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

event.target ist der Knoten, von dem das Ereignis ausgeht, und event.currentTarget bezieht sich dagegen auf den Knoten, an den der Hörer des aktuellen Ereignisses angehängt wurde. siehe Blasenbildung

Hier haben wir auf den P-Tag geklickt, aber wir haben keinen Hörer auf P, sondern auf sein übergeordnetes Element div.

Answer 2

Event.currentTarget ist die Element, dem der Event-Handler zugewiesen wurde angehängt wurde im Gegensatz zu Event.target die den Element an in dem das Ereignis eingetreten ist und das sein Nachkomme sein kann .

Quelle: MDN

target bezieht sich immer auf das Element, das vor dem addEventListener - es ist das Element, auf dem das Ereignis entstanden ist. currentTarget sagt Ihnen - wenn es sich um ein Ereignis handelt, das sich ausbreitet - das Element, das derzeit den Ereignis-Listener hat (der den Event-Handler auslöst, wenn das Ereignis eintritt).

参照 dieser CodePen für ein Beispiel. Wenn Sie die Entwicklertools öffnen und auf das Quadrat klicken, sehen Sie, dass zunächst das div das Ziel und das currentTarget ist, aber das Ereignis auf das Hauptelement überspringt - dann wird das Hauptelement zum currentTarget, während das div weiterhin das Ziel ist. Beachten Sie, dass der Ereignis-Listener an beide Elemente angehängt sein muss, damit das Blubbern auftritt.

Answer 3

Hier ist ein einfaches Szenario, um zu erklären, warum dies notwendig ist. Nehmen wir an, es gibt einige Meldungen, die Sie dem Benutzer im folgenden Format zeigen, aber Sie wollen ihm auch die Freiheit geben, sie zu schließen (es sei denn, Sie haben eine besondere Geistesstörung), also sind hier einige Meldungsfenster:

[Eine Nachricht wird in diesem Fenster erscheinen [x] ]

[Eine Nachricht wird in diesem Fenster erscheinen [x] ]

[Eine Nachricht wird in diesem Fenster erscheinen [x] ]

und wenn der Nutzer auf das Symbol [x] klicken, muss das gesamte entsprechende Fenster entfernt werden.

Hier ist der HTML-Code für das Fenster:

<div class="pane">
  A message will be here
  <span class="remove-button">[x]</span>
</div>

Wo wollen Sie nun den Click-Event-Listener hinzufügen? Der Benutzer klickt auf [x] , aber Sie wollen die Scheibe entfernen, also:

• Wenn Sie den Click-Event-Listener zum [x] dann müssen Sie das übergeordnete Element im DOM finden und es entfernen... das ist möglich aber hässlich und "DOM-abhängig".

• Und wenn Sie den Klick-Ereignis-Listener zum Fenster hinzufügen, wird das Fenster durch Klicken auf "überall auf dem Fenster" entfernt, und nicht nur durch Klicken auf seine [x] Taste.

Was können wir also tun? Wir können die "Bubbles Up"-Funktion des Ereignissystems nutzen:

"Ereignisse werden ausgelöst und steigen im DOM-Baum auf, unabhängig von der Existenz von Ereignishandlern.

In unserem Beispiel bedeutet dies, dass wir, selbst wenn wir die Ereignisbehandlungsroutinen zu den Bereichen hinzufügen, in der Lage sein werden, die Ereignisse abzufangen, die speziell durch das Klicken auf die Schaltfläche [x] ausgelöst werden (weil sich die Ereignisse überschlagen). Es gibt also kann sein Unterschied zwischen dem Ort, an dem ein Ereignis ausgelöst wird, und dem Ort, an dem wir es abfangen und behandeln.

Der Ort, an dem sie erhoben wird, ist in der event.target und wo es gefangen wird, wird in der event.currentTarget (hier sind wir derzeit Umgang mit ihm). Also:

let panes = document.getElementsByClassName("pane");
for(let pane of panes){
    pane.addEventListener('click', hndlr);
}
function hndlr(e){
    if(e.target.classList.contains('remove-button')){
        e.currentTarget.remove();
    }
}

(Die Urheberschaft für dieses Beispiel liegt bei der Website JavaScript.info )

Answer 4

ereignis.ziel ist der Knoten, von dem das Ereignis ausging, d.h. wo auch immer Sie Ihren Ereignis-Listener platzieren (auf Absatz oder Spanne), event.target bezieht sich auf den Knoten (wo der Benutzer geklickt hat).

event.currentTarget verweist dagegen auf den Knoten, an den der Hörer des aktuellen Ereignisses angehängt wurde. D.h. wenn wir unseren Ereignis-Listener an den Knoten paragraph angehängt haben, dann bezieht sich event.currentTarget auf paragraph, während event.target weiterhin auf span verweist. Hinweis: Wenn wir auch einen Event-Listener auf body haben, dann bezieht sich event.currentTarget für diesen Event-Listener auf body (d.h. das Ereignis, das als Input für Event-Listener bereitgestellt wird, wird jedes Mal aktualisiert, wenn das Ereignis einen Knoten nach oben blubbert).

Answer 5

Ein kleines Experiment

function aaa
({target, currentTarget})
{console.log({target, currentTarget})};
document.addEventListener("click", aaa);
document.querySelector("p").click();

undefiniert VM353:1
{target: p, currentTarget: document}