Heim >Web-Frontend >js-Tutorial >Was ist der Unterschied zwischen „currentTarget' und „target' bei der JavaScript-Ereignisbehandlung?
Unterscheidung zwischen currentTarget- und target-Eigenschaften in JavaScript-Ereignissen
Beim Umgang mit Ereignissen in JavaScript ist es wichtig, den Unterschied zwischen currentTarget und target zu verstehen Eigenschaften. Diese Eigenschaften liefern wertvolle Einblicke in den Ereignisausbreitungsmechanismus und spielen in verschiedenen Szenarien eine entscheidende Rolle.
Ereignisausbreitung und Eigenschaftsunterschiede
Standardmäßig folgen Ereignisse in JavaScript einem Sprudeln Ausbreitungsmodell. Dies bedeutet, dass ein Ereignis von einem bestimmten Element ausgeht und sich durch seine übergeordneten Elemente nach oben ausbreitet, bis es das Dokumentobjekt erreicht. Während dieser Weitergabe bezieht sich die Target-Eigenschaft auf das Element, das das Ereignis ursprünglich ausgelöst hat, während die CurrentTarget-Eigenschaft das Element identifiziert, an das der Ereignis-Listener angehängt ist.
Beispiel
Stellen Sie sich ein HTML-Dokument vor, das zwei verschachtelte Divs enthält:
<div>
Jetzt fügen wir einen Ereignis-Listener an das Äußere an div:
document.getElementById("div-container").addEventListener("click", function(event) { console.log(`Target: ${event.target.id}, CurrentTarget: ${event.currentTarget.id}`); });
Wenn wir auf das innere Div klicken, geben sowohl die Ziel- als auch die currentTarget-Eigenschaft „div-inner“ aus, was darauf hinweist, dass das Ereignis vom inneren Div stammt. Wenn wir jedoch auf das äußere Div klicken, gibt die Eigenschaft „currentTarget“ weiterhin „div-container“ aus, da der Ereignis-Listener an das äußere Div angehängt ist, während die Eigenschaft „target“ null ist, da das Klickereignis nicht direkt auf dem äußeren Div ausgelöst wurde div.
Anwendungsfälle
Verwendungen von Ziel:
Verwendungen von currentTarget:
Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen „currentTarget' und „target' bei der JavaScript-Ereignisbehandlung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!