Pourquoi « ceci » se comporte-t-il différemment dans les fonctions fléchées des gestionnaires d'événements ?

Fonctions fléchées et liaison "this" dans les gestionnaires d'événements

Lorsqu'ils travaillent avec les fonctions fléchées ES6 de JavaScript, les développeurs peuvent rencontrer un comportement inattendu lorsqu'ils s'appuient sur le mot-clé "this" dans les gestionnaires d'événements. Contrairement aux expressions de fonction traditionnelles, les fonctions fléchées héritent de leur contexte this de leur portée environnante, et non du contexte dans lequel elles sont appelées.

Le problème : undefined $(this)

Dans l'extrait de code fourni, l'approche de la fonction flèche lie « ceci » au contexte global (objet fenêtre) au lieu de l'élément prévu attaché à l'écouteur d'événement. Par conséquent, $(this) renvoie undefined car il n'existe aucun objet jQuery correspondant dans le contexte global.

Solution : utilisez event.currentTarget

Pour résoudre ce problème et obtenez la référence d'élément correcte, il est recommandé d'utiliser event.currentTarget dans le gestionnaire d'événements. Contrairement à "this", event.currentTarget fait toujours référence à l'élément DOM actuellement géré par les écouteurs d'événements.

Exemple utilisant event.currentTarget

Voici l'extrait de code modifié avec le correctif event.currentTarget :

<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

Pour mieux comprendre la gestion des événements, il est important de noter la différence entre event.currentTarget et event.target.

• event.currentTarget : Représente l'élément auquel l'écouteur d'événement est attaché.
• event.target : Représente l'élément qui a initialement déclenché l'événement.

Dans le contexte de bouillonnement d'événements, event.currentTarget reste le même tout au long du processus de propagation, tandis que event.target change en fonction de l'élément qui gère actuellement l'événement.

Conclusion

Les fonctions fléchées fournissent une syntaxe concise en JavaScript, mais il est crucial de se souvenir de leur comportement de portée unique lorsque vous travaillez avec "this" dans les gestionnaires d'événements. En tirant parti de event.currentTarget, les développeurs peuvent accéder de manière cohérente à l'élément DOM approprié et gérer efficacement les événements dans leurs applications JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!