EventTarget.
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.
- Renvoie
undefined
Exemple
#const like = document.querySelector('#like')
const lock = document.querySelector('#lock')
let likes = 0
function addLike() {
likes += 1
console.log('J’aime :', likes)
}
like.addEventListener('click', addLike)
lock.addEventListener('click', () => {
like.removeEventListener('click', addLike)
console.log('Mentions J’aime bloquées')
})
like.click()
lock.click()
like.click()Le dernier like.click() n’affiche rien, car la fonction addLike est déjà détachée. Cliquer sur le bouton « Aimer la leçon » dans l’aperçu ne changera rien non plus.
Définition et utilisation
#La méthode removeEventListener() retire un écouteur enregistré plus tôt avec la méthode addEventListener(). Après son appel, la fonction cesse de réagir à cet événement : le bouton arrête de compter les clics, et le document arrête d’écouter les raccourcis clavier.
Le navigateur identifie l’écouteur à retirer grâce à trois éléments : le type d’événement, la fonction et la phase, c’est-à-dire l’option capture. Vous devez passer exactement la même fonction (la même référence), pas une autre fonction au code identique. C’est pourquoi, pour un écouteur que vous prévoyez un jour de détacher, enregistrez-le dans une variable ou dans une fonction nommée. Une fonction anonyme écrite directement dans addEventListener() ne peut pas être retirée.
Si l’écouteur a été ajouté avec capture: true, indiquez aussi capture: true au moment de le retirer. Les autres options, comme once ou passive, n’ont ici aucune importance. Essayer de retirer un écouteur qui n’existe pas ne provoque pas d’erreur, il ne se passe simplement rien. Une alternative pratique est l’option signal dans addEventListener() : un seul appel à controller.abort() détache alors tous les écouteurs liés à ce signal.
Syntaxe
#target.removeEventListener(type, listener)
target.removeEventListener(type, listener, options)
target.removeEventListener(type, listener, useCapture)Paramètres
#type
chaîne
Le type d’événement, par ex."click". Doit être le même qu’à l’ajout de l’écouteur.listener
function
La même fonction (la même référence) que celle passée àaddEventListener().options
objet ou booléen, optionnel
Seulcapturecompte. Si l’écouteur a été ajouté aveccapture: true, indiquez ici la même valeur.
Plus d’exemples
#const save = document.querySelector('#save')
save.addEventListener('click', () => console.log('Enregistré'))
save.removeEventListener('click', () => console.log('Enregistré'))
save.click()Les deux fonctions fléchées ont le même code, mais ce sont deux objets différents. removeEventListener() ne trouve pas d’écouteur correspondant, donc elle ne retire rien.
const menu = document.querySelector('#menu')
const log = (event) => console.log('Cliqué :', event.target.textContent)
menu.addEventListener('click', log, { capture: true })
menu.removeEventListener('click', log)
menu.children[0].click()
menu.removeEventListener('click', log, { capture: true })
menu.children[1].click()Le premier appel cherche un écouteur ajouté sans capture, donc la fonction reste. C’est seulement en indiquant capture: true qu’elle est détachée, et le clic sur « Classement » n’affiche alors plus rien.
const nick = document.querySelector('#nick')
const controller = new AbortController()
const { signal } = controller
nick.addEventListener('input', () => console.log('input:', nick.value), { signal })
nick.addEventListener('change', () => console.log('change:', nick.value), { signal })
nick.value = 'Léa'
nick.dispatchEvent(new Event('input'))
nick.dispatchEvent(new Event('change'))
controller.abort()
nick.value = 'Lucas'
nick.dispatchEvent(new Event('input'))
nick.dispatchEvent(new Event('change'))
console.log('Les deux écouteurs sont détachés')Un seul controller.abort() retire d’un coup tous les écouteurs ajoutés avec ce même signal. Pas besoin de se souvenir de chaque fonction séparément.
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
#- Enregistrez dans une variable ou une fonction nommée l’écouteur que vous prévoyez de retirer. Passer une fonction fléchée « identique » ne donnera rien.
- Méfiez-vous de
bind(): chaque appel àthis.onClick.bind(this)crée une nouvelle fonction. Enregistrez le résultat une seule fois, par ex. dans un champ de l’objet, et utilisez-le à l’ajout comme au retrait. - Quand vous détachez plusieurs écouteurs à la fois, par ex. à la fermeture d’une boîte de dialogue, il est plus simple d’utiliser l’option
signalet un seul appel àcontroller.abort().
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.
- AbortControllerPermet d’interrompre une opération asynchrone, par exemple une requête fetch(), et de détacher plusieurs gestionnaires d’événements en un seul appel à abort().
- EventTarget.dispatchEvent()Déclenche un événement sur un élément depuis le code. Avec CustomEvent, elle permet de créer vos propres événements avec des données supplémentaires.
- 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.
- () => {}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.