JavaScript-Ereignisbehandlung: Was ist der Unterschied zwischen „currentTarget' und „target'?

JavaScript: Enthüllung der Unterscheidung zwischen CurrentTarget- und Target-Eigenschaften in der Ereignisbehandlung

Im Bereich der JavaScript-Ereignisbehandlung die currentTarget- und Target-Eigenschaften spielen unterschiedliche Rollen beim Verständnis der Ereignisausbreitung Mechanismus.

Definition:

• Ziel: Stellt das unmittelbare Element dar, das das Ereignis ausgelöst hat. Dies ist in der Regel das Element, von dem die auslösende Aktion stammt, z. B. ein Klick oder ein Hover.
• currentTarget: Bezieht sich auf das Element, an das der Ereignis-Listener angehängt ist. Es zeigt das aktuelle Element im Ereignisblasenpfad an.

Ereignis-Bubbling und -Erfassung:
Ereignisse folgen einem standardmäßigen Bubbling-Verhalten in JavaScript. Dies bedeutet, dass sich ein auf einem inneren Element ausgelöstes Ereignis im DOM-Baum zu seinen Vorfahren ausbreitet (Blase).

Rolle der Eigenschaften:
Während der Ereignisausbreitung sowohl currentTarget als auch target liefern wertvolle Informationen:

• Ziel: Identifiziert das Element, das ursprünglich das verursacht hat Ereignis, unabhängig von der Ausbreitungsphase.
• currentTarget: Wird dynamisch aktualisiert, wenn das Ereignis in der DOM-Hierarchie nach oben sprudelt. Es zeigt auf das Element, in dem der Ereignis-Listener gerade verarbeitet wird.

Szenarien und Anwendungsfälle:

• Ereignis Ausbreitungskontrolle:

  • Durch die Erfassung des Ereignisses im übergeordneten Element (event Bei der Erfassung bezieht sich das aktuelle Ziel immer auf das übergeordnete Element, während das Ziel das untergeordnete Element angibt, das das Ereignis ausgelöst hat.
  • Durch das Bubbling des Ereignisses an das Dokumentobjekt (Ereignis-Bubbling) werden sowohl das aktuelle Ziel als auch das Ziel ausgerichtet mit dem gleichen Element während der gesamten Ausbreitung.

• Element Isolation:

  • Mit currentTarget kann die Ereignisbehandlung auf bestimmte Elemente isoliert werden, indem Listener an ihre übergeordneten Elemente angehängt werden. Das Element, das das Ereignis ausgelöst hat, kann weiterhin über die Zieleigenschaft identifiziert werden.

Beispiel:

const parent = document.querySelector(".parent");
parent.addEventListener("click", (event) => {
  console.log("currentTarget:", event.currentTarget); // Parent element
  console.log("target:", event.target); // Clicked child element
});

Das obige ist der detaillierte Inhalt vonJavaScript-Ereignisbehandlung: Was ist der Unterschied zwischen „currentTarget' und „target'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!