Comment « ceci » se comporte-t-il dans les fonctions fléchées utilisées comme gestionnaires d'événements en 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!