JavaScript – Pfeilfunktionen und Event-Handler

Bei 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 eigene Funktion 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.

Event-Listener und event.currentTarget

Event-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 bewegte 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.

Verwenden 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:

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');
});

.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.

Schlussfolgerung

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.