Wie verhält sich „this“ in Pfeilfunktionen, die als Ereignishandler in JavaScript verwendet werden?

Javascript – Pfeilfunktionen im Event-Handler

In ES6 gibt es ein neues Konzept von Pfeilfunktionen, die eine präzise und übersichtliche Darstellung bieten Möglichkeit, Funktionen zu definieren. Bei der Verwendung von Pfeilfunktionen als Rückrufe in Ereignishandlern ist es jedoch von entscheidender Bedeutung, deren Verhalten zu verstehen.

Das Problem

Im bereitgestellten Code ein Ereignis. Die Eigenschaft currentTarget wird nicht verwendet und die Pfeilfunktion gibt undefiniert zurück, wenn auf Elemente geklickt wird.

this in Arrow Functions

Im Gegensatz zu regulären Funktionen ist der Wert von this im Inneren Eine Pfeilfunktion wird davon bestimmt, wo die Pfeilfunktion definiert ist, nicht davon, wo sie verwendet wird. Im bereitgestellten Beispiel wird die Pfeilfunktion im Kontext einer größeren Funktion definiert, was zu unerwartetem Verhalten führen kann.

Die Lösung

Um dieses Problem zu beheben Problem, anstatt darauf zuzugreifen, sollte event.currentTarget verwendet werden, um das Element abzurufen, an das der Handler gebunden ist. event.currentTarget verweist immer auf das DOM-Element, dessen EventListener gerade verarbeitet werden. So kann der Code geändert werden:

<code class="javascript">dom.videoLinks.click((e) => {
  e.preventDefault();
  console.log(e.currentTarget);
  var self = e.currentTarget,
    url = self.attr(configuration.attribute);

  eventHandlers.showVideo(url);

  // Deactivate any active video thumbs
  dom.videoLinks.filter('.video-selected').removeClass('video-selected');

  // Activate selected video thumb
  self.addClass('video-selected');
});</code>

.currentTarget vs. .target

Ein weiterer wichtiger Unterschied ist das Verhalten von event.currentTarget und event .target im Zusammenhang mit dem Sprudeln und Erfassen von Ereignissen.

• currentTarget: Stellt das Element dar, an das der Ereignis-Listener angehängt ist.
• target : Stellt das Element dar, das das Ereignis ausgelöst hat.

Beim Umgang mit verschachtelten Elementen und der Ereignisweitergabe stellt die Verwendung von event.currentTarget sicher, dass immer auf das richtige Element verwiesen wird.

< ;h3>Beispiel

Das bereitgestellte Snippet zeigt den Unterschied zwischen diesem, event.currentTarget und event.target. Durch Klicken auf verschiedene Elemente zeigt die Ausgabe, wie sich der Wert jeder Eigenschaft basierend auf dem ausgelösten Element und dem Kontext des Ereignis-Listeners ändert.

Das obige ist der detaillierte Inhalt vonWie verhält sich „this“ in Pfeilfunktionen, die als Ereignishandler in JavaScript verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!