Gestion des événements dans le DOM

Introduction aux événements JavaScript

Les événements JavaScript sont des actions ou des occurrences qui se produisent dans le navigateur — un clic, une pression de touche, le chargement d'une page — que votre code peut détecter et auxquelles il peut répondre. Réagir aux événements transforme une page statique en une application interactive.

Ce chapitre couvre les trois façons d'enregistrer des gestionnaires d'événements, les types d'événements les plus courants, l'objet event reçu par chaque gestionnaire, la façon dont les événements se propagent dans le DOM (bouillonnement et capture), ainsi que les patterns qui maintiennent les pages riches en événements rapides et sans fuite mémoire.

Trois façons de gérer les événements

Avant d'examiner des événements spécifiques, il est utile de savoir qu'il existe trois façons distinctes d'attacher un gestionnaire. Elles sont listées de la plus ancienne à la plus flexible.

<button id="propBtn">Click me</button>

<script>
  const btn = document.getElementById("propBtn");

  // 1. DOM property — assigning again overwrites the previous handler
  btn.onclick = function () {
    alert("Handled by the onclick property");
  };

  // 2. addEventListener — adds without overwriting; you can attach many
  btn.addEventListener("click", function () {
    console.log("Also handled by addEventListener");
  });
</script>

Les deux gestionnaires ci-dessus s'exécutent lors d'un clic. Si vous assignez btn.onclick une deuxième fois, la première assignation est silencieusement perdue — c'est la principale raison pour laquelle addEventListener() est préféré. Le reste de ce chapitre utilise addEventListener().

Événements courants en JavaScript

Événement click

L'événement click se déclenche lorsque l'utilisateur appuie et relâche le bouton principal de la souris (ou effectue un tapotement sur les appareils tactiles) sur un élément. C'est l'événement le plus fréquemment utilisé.

<button id="clickButton">Click Me</button>

<script>
  document.getElementById("clickButton").addEventListener("click", function () {
    alert("Button was clicked!");
  });
</script>

Dans cet exemple, un écouteur d'événement est ajouté à un bouton avec l'ID clickButton. Lorsque le bouton est cliqué, une boîte d'alerte avec le message "Button was clicked!" apparaît.

Événement mouseover

L'événement mouseover se déclenche lorsque le pointeur de la souris se déplace sur un élément. (Son équivalent, mouseout, se déclenche lorsque le pointeur quitte l'élément.)

<p id="mouseoverText">Hover over me!</p>

<script>
  document.getElementById("mouseoverText").addEventListener("mouseover", function () {
    this.style.color = "red";
  });
</script>

Dans cet exemple, un écouteur d'événement est ajouté à un paragraphe avec l'ID mouseoverText. Lorsque la souris survole le paragraphe, la couleur de son texte passe au rouge.

Événement keydown

L'événement keydown se déclenche lorsque l'utilisateur appuie sur une touche tandis qu'un élément est focalisé. Le gestionnaire reçoit un objet event dont la propriété event.key contient la valeur de la touche.

<input type="text" id="inputField" placeholder="Type something..." />

<script>
  document.getElementById("inputField").addEventListener("keydown", function (event) {
    alert(`Key pressed: ${event.key}`);
    this.value = '';
  });
</script>

Dans cet exemple, un écouteur d'événement est ajouté à un champ de saisie avec l'ID inputField. Lorsqu'une touche est pressée tandis que le champ de saisie est focalisé, la touche pressée est affichée dans une boîte d'alerte.

L'objet Event

Chaque gestionnaire est appelé avec un argument : l'objet event. Il décrit ce qui s'est passé et expose des méthodes pour contrôler l'événement. Les membres les plus utiles sont :

• event.target — l'élément sur lequel l'événement a réellement pris naissance (par exemple, le bouton exact sur lequel on a cliqué).
• event.currentTarget — l'élément auquel l'écouteur est attaché. À l'intérieur d'une fonction régulière, c'est identique à this.
• event.type — le nom de l'événement, comme "click".
• event.preventDefault() — annule l'action par défaut du navigateur (suivre un lien, soumettre un formulaire).
• event.stopPropagation() — empêche l'événement de continuer à remonter dans le DOM.

<a id="link" href="https://www.w3docs.com">Visit W3docs</a>

<script>
  document.getElementById("link").addEventListener("click", function (event) {
    event.preventDefault(); // stop the browser from navigating away
    console.log("type:", event.type);          // "click"
    console.log("target id:", event.target.id); // "link"
  });
</script>

Ici, preventDefault() empêche la page de naviguer, vous permettant ainsi d'exécuter votre propre logique à la place — un pattern courant pour les applications single-page et la validation de formulaire personnalisée.

Ajout d'écouteurs d'événements

La méthode addEventListener()

La méthode addEventListener() attache un gestionnaire d'événement à un élément sans écraser les gestionnaires d'événements existants. Cela signifie que vous pouvez attacher plusieurs écouteurs — même pour le même type d'événement — à un seul élément. Sa signature est element.addEventListener(type, handler, options), où options permet d'affiner le comportement (once, capture, passive).

<button id="multiEventButton">Click or Hover</button>

<script>
  const button = document.getElementById("multiEventButton");

  button.addEventListener("click", function () {
    alert("Button clicked!");
  });

  button.addEventListener("mouseover", function () {
    button.style.backgroundColor = "lightblue";
  });
</script>

Dans cet exemple, deux écouteurs d'événements sont ajoutés au bouton avec l'ID multiEventButton. Un écouteur déclenche une alerte lorsque le bouton est cliqué, et l'autre change la couleur d'arrière-plan du bouton lorsque la souris le survole.

Suppression d'écouteurs d'événements

La méthode removeEventListener()

La méthode removeEventListener() détache un gestionnaire qui a été attaché avec addEventListener(). La contrainte : vous devez passer la même référence de fonction exacte que celle que vous avez ajoutée, c'est pourquoi des fonctions nommées sont nécessaires pour supprimer un écouteur ultérieurement.

<button id="removeEventButton">Click Me</button>

<script>
  function showAlert() {
    alert("This will be removed after first click");
  }

  const button = document.getElementById("removeEventButton");
  button.addEventListener("click", showAlert);

  button.addEventListener("click", function () {
    button.removeEventListener("click", showAlert);
  });
</script>

Dans cet exemple, un écouteur d'événement qui déclenche une alerte est ajouté au bouton avec l'ID removeEventButton. Un autre écouteur d'événement est ajouté pour supprimer l'écouteur d'alerte après le premier clic. Notez que removeEventListener nécessite une référence au même objet fonction exact utilisé dans addEventListener. C'est pourquoi les fonctions anonymes ne peuvent pas être supprimées ultérieurement — chaque déclaration crée un nouvel objet fonction distinct.

Propagation des événements et délégation

Lorsqu'un événement se déclenche sur un élément, il ne s'arrête pas là. Par défaut, il se propage en deux phases : d'abord la capture (du sommet du DOM jusqu'à la cible), puis le bouillonnement (de la cible jusqu'à la racine). La plupart des gestionnaires s'exécutent pendant la phase de bouillonnement, c'est pourquoi un clic sur un bouton atteint également un écouteur de clic sur son <div> parent.

Ce bouillonnement permet la délégation d'événements : au lieu d'attacher un écouteur à chaque enfant, attachez un seul écouteur à un parent commun et lisez event.target pour déterminer quel enfant a réellement été cliqué.

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

<script>
  // One listener handles clicks on any current OR future <li>
  document.getElementById("menu").addEventListener("click", function (event) {
    if (event.target.tagName === "LI") {
      console.log("You clicked:", event.target.textContent);
    }
  });
</script>

Un seul écouteur sur <ul> gère chaque <li>, y compris ceux ajoutés à la liste ultérieurement — bien plus efficace que de câbler chaque élément individuellement. Pour un examen plus approfondi des phases et de stopPropagation(), voir bouillonnement et capture.

Bonnes pratiques

Utiliser la délégation d'événements

Ajoutez un seul écouteur d'événement à un élément parent pour gérer les événements de tous les éléments enfants. Cela améliore les performances et réduit le nombre d'écouteurs d'événements.

Éviter les fonctions anonymes pour les gestionnaires d'événements

L'utilisation de fonctions nommées pour les gestionnaires d'événements facilite leur suppression ultérieure et améliore la lisibilité du code.

Nettoyer les écouteurs d'événements

Assurez-vous que les écouteurs d'événements sont supprimés lorsqu'ils ne sont plus nécessaires afin d'éviter les fuites mémoire et d'améliorer les performances.

Minimiser le nombre d'écouteurs d'événements

Attachez les écouteurs d'événements à des éléments de niveau supérieur plutôt qu'à de nombreux éléments individuels pour réduire l'utilisation de la mémoire et améliorer les performances.

Utiliser l'option once dans addEventListener

Utilisez l'option once pour supprimer automatiquement l'écouteur d'événement après qu'il a été déclenché une fois, évitant ainsi les fuites mémoire potentielles.

button.addEventListener("click", function handler() {
  console.log("Triggered once");
}, { once: true });

Empêcher les actions par défaut et arrêter la propagation de manière appropriée

Utilisez event.preventDefault() et event.stopPropagation() judicieusement pour contrôler le comportement des événements sans interférer avec les autres gestionnaires.

Mettre en place du debounce ou du throttle pour les gestionnaires d'événements

Utilisez des techniques de debounce ou de throttle pour optimiser les performances des gestionnaires d'événements déclenchés fréquemment, comme les événements de défilement ou de redimensionnement.

Conclusion

Maîtriser les événements JavaScript est essentiel pour créer des applications web dynamiques et interactives. En comprenant comment utiliser des événements comme click, mouseover et keydown, et comment ajouter et supprimer des écouteurs d'événements avec addEventListener() et removeEventListener(), vous pouvez considérablement améliorer les interactions des utilisateurs sur vos pages web.

Pratique