Warum verhält sich „dies' in Pfeilfunktionen innerhalb von Ereignishandlern anders?

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.

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

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!