Event.
L’élément sur lequel l’événement s’est réellement produit, par ex. le bouton cliqué à l’intérieur d’une liste.
- Renvoie
- L’élément (ou un autre objet) à l’origine de l’événement.
Exemple
#const answers = document.querySelector('#answers')
answers.addEventListener('click', (event) => {
console.log('target:', event.target)
console.log('currentTarget:', event.currentTarget)
console.log('Réponse choisie', event.target.textContent)
})
answers.children[1].click()La dernière ligne simule un clic sur la réponse B. Cliquez sur une autre réponse dans l’aperçu pour voir comment target change, alors que currentTarget reste le même.
Définition et utilisation
#La propriété event.target indique l’élément à l’origine de l’événement, par exemple exactement le bouton ou l’élément de liste que l’utilisateur a cliqué. À côté, il y a event.currentTarget, c’est-à-dire l’élément auquel est attachée la fonction de gestion en cours d’exécution.
Cette différence compte, car la plupart des événements se propagent vers le haut de l’arbre (on parle de bouillonnement, ou bubbling) : cliquer sur un élément de liste déclenche aussi l’écouteur sur la liste elle-même, sur son parent, et ainsi de suite jusqu’à document. Vous pouvez donc attacher une seule fonction au parent et vérifier event.target, plutôt que d’ajouter un écouteur à chaque enfant. Cette technique s’appelle la délégation d’événements, et elle fonctionne aussi pour les éléments ajoutés plus tard.
event.target peut être un élément imbriqué plus profondément que prévu, par ex. une icône <span> à l’intérieur d’un bouton. C’est pourquoi, avec la délégation, on cherche généralement le bon élément avec event.target.closest(sélecteur).
Syntaxe
#event.target
event.currentTargetPlus d’exemples
#const todo = document.querySelector('#todo')
todo.addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('done')
console.log(`${event.target.textContent}: ${event.target.className}`)
}
})
const newItem = document.createElement('li')
newItem.textContent = 'Leçon 2'
todo.append(newItem)
newItem.click()document.addEventListener('click', (event) => {
console.log(event.target)
console.log(event.target.closest('.like'))
})
document.querySelector('.icon').click()Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Avec la délégation d’événements, utilisez
event.target.closest(sélecteur), car le clic a pu atteindre un élément imbriqué, par ex. une icône dans un bouton. - Dans la fonction de gestion,
event.currentTargetindique toujours l’élément auquel l’écouteur est attaché, etevent.targetl’élément réellement cliqué. - Dans les champs de formulaire, vous lirez la valeur saisie via
event.target.value.
Entrées associées
#- EventTarget.addEventListener()Enregistre une fonction appelée à chaque fois qu’un événement se produit sur un élément, par ex. un clic.
- Element.closest()Renvoie l’ancêtre le plus proche (ou l’élément lui-même) qui correspond à un sélecteur CSS, ou null.
- Event.preventDefault()Bloque l’action par défaut du navigateur pour un événement, par ex. l’envoi d’un formulaire ou le suivi d’un lien.
- HTMLElement.datasetUn objet avec les valeurs des attributs data-* d’un élément, pour lire et écrire vos propres données.
- Element.classListUn objet pour ajouter, retirer, basculer et vérifier les classes CSS d’un élément.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.