Warum verhält sich „this' unerwartet, wenn Pfeilfunktionen in Event-Handlern verwendet werden?

JavaScript – Pfeilfunktionen und Event-Handler

Bei der Verwendung von Pfeilfunktionen als Rückrufe für Event-Handler ist der Wert dieser innerhalb der Funktion unerwartet. Dieser Blogbeitrag erklärt den Grund für dieses Verhalten und bietet eine Lösung für den Zugriff auf das gewünschte Element mithilfe von event.currentTarget.

Pfeilfunktionen und lexikalischer Geltungsbereich

Im Gegensatz zu regulären Funktionen haben Pfeilfunktionen keine eigenen eigenen Kontext oder Spielraum dafür. Stattdessen erben sie den lexikalischen Umfang ihres umgebenden Kontexts. Im bereitgestellten Beispiel ist die Pfeilfunktion im Click-Event-Handler von dom.videoLinks definiert. Daher bezieht sich dies innerhalb der Pfeilfunktion auf das dom.videoLinks-Element.

Ereignis-Listener und event.currentTarget

Ereignis-Listener sind an bestimmte Elemente angehängt und werden ausgeführt, wenn bestimmte Ereignisse auftreten. Wenn ein Ereignis ausgelöst wird, enthält das Ereignisobjekt Informationen über das Zielelement, das das Ereignis ausgelöst hat, und das aktuelle Zielelement, an das der Ereignis-Listener angehängt ist.

Die Eigenschaft event.target verweist direkt auf das Element hat das Ereignis ausgelöst. In den meisten Fällen ist dies das Element, auf das geklickt wurde, auf das sich der Mauszeiger bewegt hat oder auf das der Fokus gerichtet wurde.

Die Eigenschaft „event.currentTarget“ hingegen bezieht sich auf das Element, an das der Ereignis-Listener angehängt ist. Dies ist das Element, auf dem das Ereignis zum Zeitpunkt der Ausführung verarbeitet wird.

Verwendung von event.currentTarget in Pfeilfunktionen

Um auf das beabsichtigte Element innerhalb eines Pfeilfunktions-Ereignishandlers zuzugreifen, verwenden Sie event .currentTarget stattdessen. Hier ist eine modifizierte Version des Codes:

<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

Im Allgemeinen sollte event.currentTarget anstelle von event.target verwendet werden, wenn mit Event-Handlern gearbeitet wird. Dies liegt daran, dass Ereignisse im DOM-Baum nach oben oder unten sprudeln können und die Verwendung von „event.target“ möglicherweise nicht immer auf das Element verweist, auf das Sie abzielen möchten.

event.currentTarget verweist konsistent auf das Element, das über den Ereignis-Listener verfügt daran angehängt, unabhängig vom Ereignisfluss.

Fazit

Wenn Sie Pfeilfunktionen in Ereignishandlern verwenden, denken Sie daran, event.currentTarget zu verwenden, um auf das beabsichtigte Element zuzugreifen. Beachten Sie den Unterschied zwischen event.target und event.currentTarget, wenn Sie mit Event-Bubbling und -Erfassung arbeiten, um eine genaue Ereignisbehandlung sicherzustellen.

Das obige ist der detaillierte Inhalt vonWarum verhält sich „this' unerwartet, wenn Pfeilfunktionen in Event-Handlern verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!