Pourquoi « ceci » ne se comporte-t-il pas comme prévu dans les fonctions fléchées dans la gestion des événements ?

Comprendre le comportement des fonctions fléchées avec la gestion des événements en Javascript

Lors de l'utilisation des fonctions fléchées comme rappels dans la gestion des événements, il est important de prendre en compte le différence entre ceci et event.currentTarget. Dans les fonctions fléchées, cela fait référence au contexte dans lequel la fonction est définie, et non à l'endroit où elle est utilisée. Par conséquent, pour accéder à l'élément auquel le gestionnaire est lié, il est nécessaire d'utiliser event.currentTarget à la place de ceci.

Distinction entre event.currentTarget et event.target

Comprendre la distinction entre event.currentTarget et event.target est crucial dans le bouillonnement et la capture d'événements. event.currentTarget représente l'élément auquel les écouteurs d'événement sont attachés, tandis que event.target désigne l'élément qui a initialement déclenché l'événement.

Selon la documentation : "currentTarget de type EventTarget, en lecture seule. Utilisé pour indiquer l'EventTarget dont les EventListeners sont actuellement en cours de traitement. Ceci est particulièrement utile lors de la capture et du bouillonnement. , la différence entre l'utilisation de this et event.currentTarget dans la gestion des événements est illustrée :

Lorsqu'un événement se produit, il se propage à travers le DOM, en commençant par l'élément cible et en remontant l'arborescence jusqu'à la racine. Au cours de ce processus, event.target indique l'élément qui a déclenché l'événement à chaque niveau, tandis que event.currentTarget représente l'élément auquel l'écouteur d'événement est attaché.

Summary

<code class="javascript">var parent = document.getElementById('parent');
parent.addEventListener('click', function(e) {

  document.getElementById('msg').innerHTML = "this: " + this.id +
    "<br> currentTarget: " + e.currentTarget.id +
    "<br>target: " + e.target.id;
});

$('#parent').on('click', function(e) {

  $('#jQmsg').html("*jQuery<br>this: " + $(this).prop('id')
                   + "<br>currenTarget: " + $(e.currentTarget).prop('id') 
                   + "<br>target: " + $(e.target).prop('id'));
});

$('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: ' + e.currentTarget.id));</code>

Pour garantir une bonne gestion des événements avec les fonctions fléchées, il est essentiel de comprendre la distinction entre this et event.currentTarget. L'utilisation de event.currentTarget permet d'accéder à l'élément associé à l'écouteur d'événement, quel que soit le contexte dans lequel la fonction flèche est définie.

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!