currentTarget vs target dans les événements JavaScript : quelle est la différence ?

currentTarget vs. target dans les événements JavaScript : découvrir les différences

Dans le domaine de la gestion des événements JavaScript, comprendre la distinction entre currentTarget et les propriétés cibles sont cruciales. Plongeons dans leurs différences à l'aide d'un exemple.

Exploration de la propriété cible

La propriété cible représente l'élément qui a directement déclenché l'événement. Considérons le scénario suivant :

const button = document.querySelector('button');

button.addEventListener('click', (e) => {
  console.log(e.target); // Logs the button element clicked
});

Dans cet exemple, lorsque l'on clique sur le bouton, l'e.target fera référence au bouton lui-même, car c'est l'élément qui a initié l'événement de clic.

Présentation de la propriété currentTarget

Alors que target pointe vers l'initiateur de l'événement, currentTarget représente l'élément auquel le gestionnaire d'événements est attaché. Modifions notre code précédent :

const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click', (e) => {
  console.log(e.currentTarget); // Logs the wrapper div
});

Dans ce cas, le e.currentTarget fera référence au div wrapper, même si l'événement click provient du bouton qu'il contient. En effet, l'écouteur d'événement est attaché au wrapper, ce qui en fait l'élément de contrôle.

Choisir la bonne propriété : guide basé sur un scénario

• Utiliser la cible lorsque : Vous devez accéder aux informations sur l'élément qui a provoqué le problème. event.
• Utilisez currentTarget lorsque : Vous souhaitez travailler avec l'élément auquel le gestionnaire d'événements est attaché, quelle que soit l'origine de l'événement dans la hiérarchie de cet élément.

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!