Pourquoi utiliser « event.currentTarget » au lieu de « this » dans une fonction de flèche dans les gestionnaires d'événements JavaScript ?

.this dans Fonctions fléchées : considérations sur les gestionnaires d'événements

En travaillant avec JavaScript, les développeurs peuvent rencontrer des difficultés lors de l'utilisation des fonctions fléchées dans les gestionnaires d'événements. Par défaut, lorsqu'une fonction fléchée est utilisée dans un rappel d'événement, obtenir qu'elle représente l'élément auquel le gestionnaire d'événement est lié devient problématique. Cela se produit parce que la valeur de this dans une fonction fléchée est déterminée lors de sa définition plutôt qu'au moment de son utilisation.

Pour résoudre ce problème, il est conseillé d'utiliser event.currentTarget au lieu de cela lors de l'utilisation de fonctions fléchées. dans les rappels. event.currentTarget désigne systématiquement l'élément DOM associé à l'écouteur d'événement en cours d'exécution, garantissant que l'élément souhaité peut être référencé avec précision.

Comprendre .currentTarget

L'utilisation de event.currentTarget découle des concepts de capture et de bouillonnement d'événements. Comprendre ces mécanismes est crucial pour naviguer efficacement dans la gestion des événements en JavaScript.

• event.currentTarget représente l'élément sur lequel l'écouteur d'événement est défini, appelé cible d'événement.
• event.target signifie l'élément qui a initialement déclenché l'événement.

Event Bubbling and Capture

Pendant propagation des événements, le comportement du navigateur peut être influencé par l'utilisation de la capture et du bouillonnement d'événements. Les deux impliquent le flux d'événements au sein de l'arborescence DOM, mais dans des directions différentes.

• Event Bubbling : les événements remontent dans l'arborescence DOM, de l'élément cible à la racine du document.
• Capture d'événements : Les événements descendent dans l'arborescence DOM, de la racine du document à l'élément cible.

Dans le contexte de la gestion des événements, la distinction entre currentTarget et target deviennent évidents. Lorsqu'un événement est délégué à un élément parent et déclenche un événement sur un élément enfant, currentTarget reste l'élément parent, tandis que target fait référence à l'élément enfant. Cette distinction devient particulièrement importante lorsqu'il s'agit d'éléments créés ou insérés dynamiquement dans le DOM après que les écouteurs d'événements ont été attachés.

Exemple : Différencier .currentTarget et .target

Considérez l'extrait ci-dessous :

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

Lorsque cet extrait est exécuté, cliquer sur les éléments enfants ou petits-enfants déclenche le bouillonnement d'événements. Le comportement résultant est démontré dans le tableau suivant :

Event Listener	this	currentTarget	target
function	child	parent	child/grand-child
jQuery	parent	parent	child/grand-child
Arrow function	undefined	parent	child/grand-child

Comme le montre le tableau, cela renvoie undefined lorsqu'une fonction fléchée est utilisée, soulignant la nécessité d'utiliser event.currentTarget à la place. En utilisant event.currentTarget, l'élément correct peut toujours être référencé dans les fonctions fléchées, garantissant une gestion efficace des événements en 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!