Pfeilfunktionen und „diese“ Bindung in Ereignishandlern
Bei der Arbeit mit den ES6-Pfeilfunktionen von JavaScript können Entwickler auf unerwartetes Verhalten stoßen, wenn sie sich darauf verlassen das Schlüsselwort „this“ innerhalb von Event-Handlern. Im Gegensatz zu herkömmlichen Funktionsausdrücken erben Pfeilfunktionen ihren This-Kontext von ihrem umgebenden Bereich, nicht von dem Kontext, in dem sie aufgerufen werden.
Das Problem: undefiniertes $(this)
Im bereitgestellten Codeausschnitt bindet der Pfeilfunktionsansatz „this“ an den globalen Kontext (Fensterobjekt) und nicht an das beabsichtigte Element, das an den Ereignis-Listener angehängt ist. Infolgedessen gibt $(this) undefiniert zurück, da es im globalen Kontext kein entsprechendes jQuery-Objekt gibt.
Lösung: Verwenden Sie event.currentTarget
Um dieses Problem zu beheben Um die richtige Elementreferenz zu erhalten, wird empfohlen, event.currentTarget im Event-Handler zu verwenden. Im Gegensatz zu „this“ bezieht sich event.currentTarget immer auf das DOM-Element, das aktuell von Ereignis-Listenern verarbeitet wird.
Beispiel für die Verwendung von event.currentTarget
Hier ist der geänderte Codeausschnitt mit dem event.currentTarget-Fix:
<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
Um die Ereignisbehandlung besser zu verstehen, ist es wichtig, den Unterschied zwischen event.currentTarget zu beachten und event.target.
Im Zusammenhang mit dem Event-Bubbling bleibt event.currentTarget während des gesamten Ausbreitungsprozesses gleich, während sich event.target entsprechend dem Element ändert, das gerade verarbeitet wird das Ereignis.
Fazit
Pfeilfunktionen bieten eine prägnante Syntax in JavaScript, aber es ist wichtig, sich an ihr einzigartiges Scoping-Verhalten zu erinnern, wenn man mit „this“ innerhalb von Ereignishandlern arbeitet. Durch die Nutzung von event.currentTarget können Entwickler konsistent auf das entsprechende DOM-Element zugreifen und Ereignisse in ihren JavaScript-Anwendungen effektiv verarbeiten.
Das obige ist der detaillierte Inhalt vonWarum verhält sich „dies' in Pfeilfunktionen innerhalb von Ereignishandlern anders?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
