# Gestionnaire d’événement

> Fonction associée à un élément du DOM qui s'exécute automatiquement lorsqu'un événement précis se produit, comme un clic ou une saisie clavier.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/gestionnaire-evenement/

Écouter, c'est attendre qu'il se passe quelque chose pour réagir : un gestionnaire d'événement fait exactement cela pour une page web, en surveillant un élément et en déclenchant du code dès qu'une interaction survient.

## Interactivité côté WordPress

Un bouton « ajouter au panier » sur une boutique WooCommerce, un menu qui se déplie au clic sur mobile, un formulaire qui affiche un message d'erreur en temps réel : tout repose sur des gestionnaires d'événements attachés via `addEventListener`. Ils sont généralement placés dans un script chargé avec `wp_enqueue_script`, en s'assurant que le DOM est prêt avant de cibler les éléments.

## Exemple

```
const bouton = document.querySelector('.menu-mobile-toggle');

bouton.addEventListener('click', function () {
  document.body.classList.toggle('menu-ouvert');
});
```

Chaque clic sur l'élément ciblé bascule la classe CSS `menu-ouvert`, ce qui permet d'afficher ou de masquer la navigation sans recharger la page.

## Pièges fréquents

- Attacher un gestionnaire avant que l'élément existe dans le DOM ne produit aucune erreur visible, mais le clic reste sans effet : mieux vaut charger le script en différé ou l'exécuter après `DOMContentLoaded`.
- Multiplier les écouteurs identiques sur les mêmes éléments (par exemple après un rechargement dynamique de contenu) peut déclencher une action plusieurs fois pour un seul clic.
- Une méthode `removeEventListener` existe pour se désabonner proprement, utile quand un composant est retiré de la page pour éviter les fuites mémoire.