JavaScript - Fonctions fléchées et gestionnaires d'événements

Lors de l'utilisation de fonctions fléchées comme rappels pour les gestionnaires d'événements, la valeur de this dans la fonction est inattendue. Cet article de blog explique la raison de ce comportement et fournit une solution pour accéder à l'élément souhaité à l'aide de event.currentTarget.

Fonctions fléchées et portée lexicale

Contrairement aux fonctions classiques, les fonctions fléchées n'ont pas leur propre contexte ou portée pour cela. Au lieu de cela, ils héritent de la portée lexicale de leur contexte environnant. Dans l'exemple fourni, la fonction de flèche est définie dans le gestionnaire d'événements click de dom.videoLinks. Par conséquent, cela dans la fonction de flèche fait référence à l'élément dom.videoLinks.

Les écouteurs d'événements et event.currentTarget

Les écouteurs d'événements sont attachés à des éléments spécifiques et sont exécutés lorsque certains événements se produisent. Lorsqu'un événement est déclenché, l'objet événement contient des informations sur l'élément cible qui a déclenché l'événement et sur l'élément cible actuel auquel l'écouteur d'événement est attaché.

La propriété event.target fait référence à l'élément qui directement a déclenché l'événement. Dans la plupart des cas, il s'agit de l'élément sur lequel on a cliqué, survolé ou qui a reçu le focus.

La propriété event.currentTarget, en revanche, fait référence à l'élément auquel l'écouteur d'événement est attaché. Il s'agit de l'élément sur lequel l'événement est traité au moment de l'exécution.

Utilisation de event.currentTarget dans les fonctions fléchées

Pour accéder à l'élément souhaité dans un gestionnaire d'événements de fonction fléchée, utilisez event .currentTarget au lieu de cela. Voici une version modifiée du code :

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');
});

.currentTarget vs .target

En général, event.currentTarget doit être utilisé sur event.target lorsque vous travaillez avec des gestionnaires d'événements. En effet, les événements peuvent remonter ou capturer l'arborescence DOM et l'utilisation de event.target peut ne pas toujours faire référence à l'élément que vous avez l'intention de cibler.

event.currentTarget fait systématiquement référence à l'élément qui a l'écouteur d'événement. qui y est attaché, quel que soit le flux d'événements.

Conclusion

Lorsque vous utilisez des fonctions fléchées dans les gestionnaires d'événements, n'oubliez pas d'utiliser event.currentTarget pour accéder à l'élément prévu. Gardez à l'esprit la distinction entre event.target et event.currentTarget lorsque vous travaillez avec la diffusion et la capture d'événements pour garantir une gestion précise des événements.