Maison > interface Web > js tutoriel > le corps du texte

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

Susan Sarandon
Libérer: 2024-10-30 21:52:03
original
658 Les gens l'ont consulté

Why Does

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>
Copier après la connexion

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

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!