Gestion des événements JavaScript : quelle est la différence entre « currentTarget » et « target » ?

JavaScript : dévoiler la distinction entre les propriétés CurrentTarget et Target dans la gestion des événements

Dans le domaine de la gestion des événements JavaScript, les propriétés currentTarget et target tenir des rôles distincts dans la compréhension de la propagation des événements mécanisme.

Définition :

• cible : Représente l'élément immédiat qui a initié l'événement. Il s'agit généralement de l'élément d'où provient l'action déclenchante, comme un clic ou un survol.
• currentTarget : Fait référence à l'élément auquel l'écouteur d'événement est attaché. Il indique l'élément actuel dans le chemin de la bulle d'événement.

Bubbling et capture d'événements :
Les événements suivent un comportement de bouillonnement par défaut en JavaScript. Cela signifie qu'un événement déclenché sur un élément interne se propagera (bulle) dans l'arborescence DOM jusqu'à ses ancêtres.

Rôle des propriétés :
Pendant la propagation de l'événement, currentTarget et target fournir des informations précieuses :

• cible : Identifie l'élément qui a initialement provoqué le événement, quelle que soit la phase de propagation.
• currentTarget : Se met à jour dynamiquement à mesure que l'événement remonte dans la hiérarchie DOM. Il pointe vers l'élément dans lequel l'écouteur d'événement est actuellement géré.

Scénarios et cas d'utilisation :

• Événement Contrôle de propagation :

  • En capturant l'événement dans l'élément parent (capture d'événement), currentTarget fera toujours référence au parent, tandis que la cible indiquera l'élément enfant qui a déclenché l'événement.
  • En diffusant l'événement vers l'objet document (événement bouillonnant), currentTarget et target s'alignera avec le même élément tout au long de la propagation.

• Élément Isolation :

  • À l'aide de currentTarget, la gestion des événements peut être isolée sur des éléments spécifiques en attachant des écouteurs à leurs éléments parents. L'élément qui a initié l'événement peut toujours être identifié grâce à la propriété cible.

Exemple :

const parent = document.querySelector(".parent");
parent.addEventListener("click", (event) => {
  console.log("currentTarget:", event.currentTarget); // Parent element
  console.log("target:", event.target); // Clicked child element
});

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!