Maison > Article > interface Web > Pourquoi utiliser « event.currentTarget » au lieu de « this » dans une fonction de flèche dans les gestionnaires d'événements JavaScript ?
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.
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.
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.
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.
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!