Maison  >  Article  >  interface Web  >  Comment « ceci » se comporte-t-il dans les fonctions fléchées utilisées comme gestionnaires d'événements en JavaScript ?

Comment « ceci » se comporte-t-il dans les fonctions fléchées utilisées comme gestionnaires d'événements en JavaScript ?

Susan Sarandon
Susan Sarandonoriginal
2024-10-30 07:08:02418parcourir

How does `this` behave in arrow functions used as event handlers in JavaScript?

Javascript - les fonctions fléchées fonctionnent dans le gestionnaire d'événements

Dans ES6, il existe un nouveau concept de fonctions fléchées qui offrent un aperçu concis et plus propre façon de définir les fonctions. Cependant, lorsque vous utilisez des fonctions fléchées comme rappels dans les gestionnaires d'événements, comprendre leur comportement devient crucial.

Le problème

Dans le code fourni, un événement. La propriété currentTarget n'est pas utilisée et la fonction flèche renvoie un élément indéfini lorsque vous cliquez sur des éléments.

une fonction de flèche est déterminée par l'endroit où la fonction de flèche est définie, et non par l'endroit où elle est utilisée. Dans l'exemple fourni, la fonction flèche est définie dans le contexte d'une fonction plus large, ce qui peut entraîner un comportement inattendu.

La solution

Pour résoudre ce problème problème, au lieu d'y accéder, event.currentTarget doit être utilisé pour obtenir l'élément auquel le gestionnaire est lié. event.currentTarget fait toujours référence à l'élément DOM dont les EventListeners sont actuellement en cours de traitement. Voici comment le code peut être modifié :

.currentTarget vs .target

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

Une autre différence importante à noter est le comportement de event.currentTarget et event. .target dans le contexte de la diffusion et de la capture d'événements.

    currentTarget
  •  : représente l'élément auquel l'écouteur d'événement est attaché.
  • target
  •  : représente l'élément qui a déclenché l'événement.
  • Lorsque vous traitez des éléments imbriqués et la propagation d'événements, l'utilisation de event.currentTarget garantit que l'élément correct est toujours référencé.

< ;h3>Exemple

L'extrait fourni montre la différence entre ceci, event.currentTarget et event.target. En cliquant sur différents éléments, le résultat montre comment la valeur de chaque propriété change en fonction de l'élément déclenché et du contexte de l'écouteur d'événement.

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!

Déclaration:
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