Gestionnaire d’événement

É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.