EventTarget.
Enregistre une fonction appelée à chaque fois qu’un événement se produit sur un élément, par ex. un clic.
- Renvoie
undefined
Exemple
#const button = document.querySelector('#like')
let likes = 0
button.addEventListener('click', () => {
likes += 1
button.textContent = `J’aime : ${likes}`
console.log('Clic, j’aime :', likes)
})
button.click()
button.click()Les deux dernières lignes simulent des clics avec button.click(), pour que le résultat apparaisse immédiatement. Cliquez sur le bouton dans l’aperçu, et la console affichera d’autres entrées.
Définition et utilisation
#La méthode addEventListener() relie un événement à une fonction de gestion. Le premier argument est le type d’événement (par ex. "click", "input", "submit", "keydown"), et le second une fonction qui reçoit un objet événement avec des informations sur ce qui s’est passé.
Vous pouvez enregistrer plusieurs fonctions pour le même événement sur un seul élément. Elles s’exécutent dans l’ordre d’ajout. La méthode fonctionne sur les éléments, mais aussi sur document et window, par ex. pour gérer des raccourcis clavier ou un changement de taille de la fenêtre.
Le troisième argument est un objet d’options : once: true retire l’écouteur après le premier déclenchement, passive: true indique au navigateur que la fonction ne bloquera pas le défilement, et signal permet de détacher l’écouteur via un AbortController. Vous pouvez aussi retirer un écouteur avec removeEventListener(), mais vous devez lui passer exactement la même fonction, donc une fonction anonyme ne convient pas pour cela.
Syntaxe
#target.addEventListener(type, listener)
target.addEventListener(type, listener, options)
target.removeEventListener(type, listener)Paramètres
#type
chaîne
Le type d’événement, par ex."click","input","submit"ou"keydown". Sans le préfixeon.listener
function (event)
La fonction appelée à chaque déclenchement de l’événement. Elle reçoit l’objet événement.options
objet, optionnel
Les réglages :once,passive,captureetsignal.
Plus d’exemples
#const bonus = document.querySelector('#bonus')
bonus.addEventListener('click', () => console.log('Bonus récupéré : +50 pièces'), { once: true })
bonus.click()
bonus.click()const input = document.querySelector('#nick')
input.addEventListener('input', (event) => {
console.log(`Saisi : ${event.target.value}`)
})
input.value = 'Léa'
input.dispatchEvent(new Event('input'))L’événement input apparaît à chaque changement du contenu du champ. Ici, nous le déclenchons manuellement avec dispatchEvent(), et si vous tapez quelque chose dans le champ de l’aperçu, la console affichera les valeurs successives.
const button = document.querySelector('#hint')
let used = 0
function showHint() {
used += 1
console.log(`Indice ${used} sur 2`)
if (used === 2) button.removeEventListener('click', showHint)
}
button.addEventListener('click', showHint)
button.click()
button.click()
button.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
#- Passez une fonction, pas son résultat :
addEventListener("click", save), et nonaddEventListener("click", save()). - Plutôt que d’ajouter un écouteur à chacun de plusieurs éléments, ajoutez-en un seul à leur parent commun et vérifiez
event.target. C’est ce qu’on appelle la délégation d’événements. - Si vous prévoyez de retirer l’écouteur, enregistrez la fonction dans une variable.
removeEventListener()a besoin exactement de la même fonction.
Entrées associées
#- Event.targetL’élément sur lequel l’événement s’est réellement produit, par ex. le bouton cliqué à l’intérieur d’une liste.
- 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.
- EventTarget.removeEventListener()Détache une fonction de gestion d’événement ajoutée plus tôt avec addEventListener(). Exige la même fonction et le même type d’événement.
- Element.closest()Renvoie l’ancêtre le plus proche (ou l’élément lui-même) qui correspond à un sélecteur CSS, ou null.
- document.querySelector()Renvoie le premier élément qui correspond à un sélecteur CSS, ou null si rien ne correspond.
- () => {}Fonction fléchée (arrow function) : une syntaxe de fonction plus courte, sans this propre, avec un return implicite pour une seule expression.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.