Comment ajouter un écouteur d'événements à plusieurs éléments dans JavaScript

Supposons que vous souhaitiez ajouter un écouteur d'événements à plusieurs éléments dans JavaScript. Comment pouvez-vous faire cela?

En JavaScript, vous ajoutez unécouteur d'événementà un seul élément en utilisant cette syntaxe:

document.querySelector('.my-element').addEventListener('click', event => {
  //handle click
})

Mais comment attacher le même événement à plusieurs éléments?

En d'autres termes, comment appeleraddEventListener()sur plusieurs éléments en même temps?

Vous pouvez le faire de 2 manières. L'un utilise unboucle, l'autre utiliseévénement bouillonnant.

Utiliser une boucle

La boucle est la plus simple du point de vue conceptuel.

Tu peux appelerquerySelectorAll()sur tous les éléments avec une classe spécifique, puis utilisezforEach()pour les itérer:

document.querySelectorAll('.some-class').forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  })
})

Si vous n'avez pas de classe commune pour vos éléments, vous pouvez créer un tableau à la volée:

[document.querySelector('.a-class'), document.querySelector('.another-class')].forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  })
})

Utilisation du bouillonnement d'événement

Une autre option est de s'appuyer surévénement bouillonnantet attachez l'écouteur d'événement sur lebodyélément.

L'événement est toujours géré par l'élément le plus spécifique, vous pouvez donc immédiatement vérifier si c'est l'un des éléments qui devrait gérer l'événement:

const element1 = document.querySelector('.a-class')
const element2 = document.querySelector('.another-class')

body.addEventListener(‘click’, event => { if (event.target !== element1 && event.target !== element2) { return } //handle click }

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: