currentTarget vs. target in JavaScript-Ereignissen: Was ist der Unterschied?

currentTarget vs. target in JavaScript-Ereignissen: Die Unterschiede aufdecken

Im Bereich der JavaScript-Ereignisbehandlung das Verständnis des Unterschieds zwischen currentTarget und Zieleigenschaften sind entscheidend. Lassen Sie uns anhand eines Beispiels auf ihre Unterschiede eingehen.

Erkundung der Zieleigenschaft

Die Zieleigenschaft stellt das Element dar, das das Ereignis direkt ausgelöst hat. Stellen Sie sich das folgende Szenario vor:

const button = document.querySelector('button');

button.addEventListener('click', (e) => {
  console.log(e.target); // Logs the button element clicked
});

Wenn in diesem Beispiel auf die Schaltfläche geklickt wird, verweist e.target auf die Schaltfläche selbst, da es sich um das Element handelt, das das Klickereignis ausgelöst hat.

Einführung der currentTarget-Eigenschaft

Während target auf den Initiator des Ereignisses zeigt, stellt currentTarget das Element dar, das Der Event-Handler ist angehängt. Ändern wir unseren vorherigen Code:

const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click', (e) => {
  console.log(e.currentTarget); // Logs the wrapper div
});

In diesem Fall verweist e.currentTarget auf das Wrapper-Div, auch wenn das Klickereignis von der darin enthaltenen Schaltfläche stammt. Dies liegt daran, dass der Ereignis-Listener an den Wrapper angehängt ist und ihn somit zum steuernden Element macht.

Auswahl der richtigen Eigenschaft: Szenariobasierter Leitfaden

• Verwenden Sie das Ziel, wenn: Sie müssen auf Informationen über das Element zugreifen, das das verursacht hat Ereignis.
• Verwenden Sie currentTarget, wenn: Sie mit dem Element arbeiten möchten, an das der Ereignishandler angehängt ist, unabhängig davon, wo das Ereignis innerhalb der Hierarchie dieses Elements seinen Ursprung hat.

Das obige ist der detaillierte Inhalt voncurrentTarget vs. target in JavaScript-Ereignissen: Was ist der Unterschied?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!