Heim >Web-Frontend >js-Tutorial >Warum verhält sich „this' unerwartet, wenn Pfeilfunktionen in Event-Handlern verwendet werden?
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.
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 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.
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>
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.
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!