JavaScript — Introduction aux événements du navigateur

Maîtriser les événements du navigateur en JavaScript

Un événement du navigateur est un signal indiquant que quelque chose s'est produit sur la page — un utilisateur a cliqué sur un bouton, une touche a été enfoncée, une image a fini de se charger, la fenêtre a été redimensionnée. Réagir à ces signaux transforme un document statique en une application interactive.

Ce guide explique ce que sont les événements, les trois façons de les écouter (et laquelle privilégier), ce que l'objet événement vous apporte, comment arrêter d'écouter, et propose six exemples concrets et exécutables. Si vous débutez avec le langage, commencez par l'introduction à JavaScript.

Comprendre les événements du navigateur

Un événement est une action ou une occurrence que le navigateur détecte et à laquelle votre code peut réagir. Les événements se répartissent en deux grandes catégories :

• Événements déclenchés par l'utilisateur — cliquer avec la souris, saisir du texte, déplacer le pointeur, soumettre un formulaire.
• Événements déclenchés par le système — la page qui finit de se charger, une image qui échoue à se charger, une animation CSS qui se termine, la fenêtre qui est redimensionnée.

Types d'événements

Voici quelques-uns des événements les plus courants, regroupés par catégorie :

Chaque catégorie dispose de son propre chapitre dédié : voir les événements souris, les événements clavier, les événements de soumission de formulaire et les événements de chargement des ressources.

Trois façons d'ajouter des gestionnaires d'événements

Il existe trois façons de réagir à un événement. Elles sont listées de la moins flexible à la plus flexible.

1. Attribut HTML (onclick="...") — rapide, mais mélange JavaScript dans votre balisage et ne permet qu'un seul gestionnaire. À éviter dans les projets réels.

<button onclick="alert('Button clicked!')">Click Me!</button>

2. Propriété DOM (element.onclick) — garde le code dans JavaScript, mais assigner un nouveau gestionnaire écrase le précédent, donc toujours un seul gestionnaire par événement.

<button id="myButton">Click Me!</button>

document.getElementById('myButton').onclick = function () {
  alert('Button clicked!');
};

3. addEventListener (recommandé) — l'approche standard. Vous pouvez attacher plusieurs gestionnaires pour le même événement, contrôler la phase de capture/bouillonnement, et retirer le gestionnaire ultérieurement.

<button id="myButton">Click Me!</button>

document.getElementById('myButton').addEventListener('click', function () {
  alert('Button clicked!');
});

addEventListener est préféré car il permet d'enregistrer plusieurs écouteurs pour le même événement et offre un contrôle plus fin sur la gestion des événements — par exemple en appelant event.stopPropagation() ou event.preventDefault(). Il accepte également un objet d'options : { once: true } exécute le gestionnaire une seule fois, et { capture: true } écoute pendant la phase de capture (voir bouillonnement et capture).

Retirer un écouteur d'événement

Un écouteur reste attaché jusqu'à ce que vous le retiriez (ou que l'élément soit collecté par le ramasse-miettes). Pour en retirer un, vous devez passer la même référence de fonction que celle ajoutée — une fonction anonyme en ligne ne peut pas être retirée car il n'existe aucune référence vers elle.

function handleClick() {
  console.log('clicked');
}

const btn = document.getElementById('myButton');
btn.addEventListener('click', handleClick);

// later — stops the handler from firing again
btn.removeEventListener('click', handleClick);

L'objet événement

Lorsqu'un événement se déclenche, le navigateur crée un objet événement décrivant ce qui s'est produit et le passe en premier argument à votre gestionnaire. Les propriétés utiles incluent :

• event.type — le nom de l'événement, par exemple "click".
• event.target — l'élément qui a réellement déclenché l'événement.
• event.currentTarget — l'élément auquel l'écouteur est attaché (équivalent à this dans un gestionnaire de fonction classique).
• event.preventDefault() — annule l'action par défaut du navigateur (par exemple, suivre un lien).
• event.stopPropagation() — empêche l'événement de bouillonner vers les éléments ancêtres.

<button id="myButton">Click Me!</button>
<div style="margin-top:10px;" id="eventInfo"></div>

<script>
  document.getElementById('myButton').addEventListener('click', function(event) {
    var eventInfo = 'Event Type: ' + event.type + '<br />Clicked Element: ' + event.target.tagName;
    document.getElementById('eventInfo').innerHTML = eventInfo;
  });
</script>

Exemples concrets de gestion des événements du navigateur

Plongeons dans quelques exemples pratiques illustrant la gestion des événements du navigateur dans des situations réelles.

Exemple 1 : Événement de soumission de formulaire

Gestion de la soumission d'un formulaire pour valider les données avant de les envoyer au serveur :

<form id="loginForm">
  Username: <input type="text" name="username" required />
  Password: <input type="password" name="password" required />
  <button type="submit">Login</button>
</form>

<script>
  document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the form from submitting normally
    if (this.username.value.length < 4 || this.password.value.length < 4) {
      alert('Username and password must be at least 4 characters long.');
    } else {
      this.submit(); // Submit the form manually if validation passes
      alert('successfully submitted');
    }
  });
</script>

(Remarque : Une fonction classique est utilisée ici plutôt qu'une fonction fléchée afin de préserver le contexte this, ce qui permet à this.username et this.password de référencer correctement les éléments du formulaire.)

Exemple 2 : Gestion des événements mouseover et mouseout

Modifier le style d'un bouton lorsque la souris le survole, et le réinitialiser lorsqu'elle le quitte :

<button id="hoverButton">Hover Over Me!</button>

<script>
  const button = document.getElementById('hoverButton');
  button.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'green';
  });
  button.addEventListener('mouseleave', function() {
    this.style.backgroundColor = '';
  });
</script>

Exemple 3 : Événements clavier

Exécuter une fonction lorsque la touche Entrée est pressée :

<input type="text" id="inputField" placeholder="Type something and press Enter" />

<script>
  document.getElementById('inputField').addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
      alert('You pressed Enter!');
    }
  });
</script>

Exemple 4 : Fonctionnalité glisser-déposer

Implémentation du glisser-déposer pour un simple transfert d'image au sein d'une page web :

<span>Drop image below</span>
<div id="dragArea" style="width: 300px; height: 300px; border: 2px dashed #ccc;">
  
</div>
<img id="draggableImage" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Crect width='150' height='150' fill='%234f46e5'/%3E%3Ctext x='75' y='80' fill='white' font-size='18' text-anchor='middle'%3EDrag me%3C/text%3E%3C/svg%3E" draggable="true" style="width: 150px; height: 150px;">

<script>
  const dragArea = document.getElementById('dragArea');
  const draggableImage = document.getElementById('draggableImage');

  // Event listener for the drag start
  draggableImage.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData("text/plain", event.target.id);
  });

  // Event listener for dragging over the drag area
  dragArea.addEventListener('dragover', function(event) {
    event.preventDefault(); // Necessary to allow the drop
  });

  // Event listener for drop
  dragArea.addEventListener('drop', function(event) {
    event.preventDefault(); // Prevent default behavior (like opening as link for some elements)
    const data = event.dataTransfer.getData("text/plain");
    const image = document.getElementById(data);
    dragArea.appendChild(image);
  });
</script>

Explication :

• Début du glissement : Lorsque vous commencez à faire glisser l'image, l'ID de l'image est enregistré dans les données de glissement.
• Glissement au-dessus : Il est nécessaire d'empêcher l'action par défaut pour autoriser le dépôt.
• Dépôt : Lors du dépôt, l'image est déplacée vers la zone de dépôt.

Exemple 5 : Événements de début et fin d'animation

Utilisation des animations CSS et gestion de leur début et de leur fin avec JavaScript :

<div id="animateBox" style="width: 100px; height: 100px; background: red; position: relative; animation: moveBox 5s 2;"></div>
<div id="animationStatus"></div>

<style>
  @keyframes moveBox {
    0% { left: 0; }
    50% { left: 200px; }
    100% { left: 0; }
  }
</style>

<script>
  const box = document.getElementById('animateBox');
  const statusDisplay = document.getElementById('animationStatus');

  box.addEventListener('animationstart', function() {
    statusDisplay.innerHTML = 'Animation started';
  });

  box.addEventListener('animationend', function() {
    statusDisplay.innerHTML = 'Animation ended';
  });

  box.addEventListener('animationiteration', function() {
    statusDisplay.innerHTML = 'Animation iteration';
  });
</script>

(Remarque : animationstart et les événements associés sont standard dans les navigateurs modernes. Les versions plus anciennes de Safari peuvent nécessiter des préfixes propriétaires comme -webkit-animationstart, mais les noms standard sont recommandés pour le développement actuel.)

Explication :

• animationstart se déclenche une fois lorsque l'animation commence.
• animationiteration se déclenche au début de chaque répétition — utile lorsqu'une animation est configurée pour s'exécuter plusieurs fois.
• animationend se déclenche une fois lorsque l'animation se termine. La div #animationStatus est mise à jour à chaque événement pour afficher un retour en direct sur la page.

Exemple 6 : Événements personnalisés

Création et déclenchement d'événements personnalisés pour gérer des scénarios spécifiques à l'application :

<button id="customEventButton">Trigger Custom Event</button>

<script>
  // Creating a custom event
  const myEvent = new CustomEvent('myCustomEvent', {
    detail: { message: 'Custom event triggered' }
  });

  // Event listener for custom event
  document.addEventListener('myCustomEvent', function(event) {
    alert('Event Message: ' + event.detail.message);
  });

  // Dispatch the custom event when button is clicked
  document.getElementById('customEventButton').addEventListener('click', function() {
    document.dispatchEvent(myEvent);
  });
</script>

Explication :

• Création de l'événement personnalisé : Définit un événement personnalisé avec des données supplémentaires (detail contenant un message).
• Gestion de l'événement : Configure un écouteur pour l'événement personnalisé qui affiche une alerte avec le message issu du détail de l'événement.
• Déclenchement de l'événement : Déclenche l'événement personnalisé lors d'un clic sur le bouton.

Bonnes pratiques

• Préférez addEventListener aux attributs onclick en ligne — cela sépare le comportement du balisage et prend en charge plusieurs gestionnaires.
• Utilisez des fonctions classiques lorsque vous avez besoin que this fasse référence à l'élément ; utilisez des fonctions fléchées dans le cas contraire, et lisez event.currentTarget à la place.
• Nettoyez les écouteurs dont vous n'avez plus besoin avec removeEventListener (en passant la même référence de fonction) pour éviter les fuites mémoire, notamment dans les applications à page unique.
• Attachez un seul écouteur à un parent plutôt qu'un à chaque enfant lors de la gestion de listes — cette technique, appelée délégation d'événements, repose sur le bouillonnement d'événements.
• Limitez la fréquence des événements à haute cadence tels que scroll et resize pour éviter d'exécuter des traitements coûteux à chaque déclenchement ; voir optimisation des performances du DOM.

Conclusion

Les événements du navigateur sont le pont entre ce que fait l'utilisateur et la façon dont votre code répond. Les points essentiels à retenir : utilisez addEventListener pour sa flexibilité, lisez ce dont vous avez besoin dans l'objet événement, appelez preventDefault() ou stopPropagation() lorsque vous devez outrepasser le comportement par défaut, et retirez les écouteurs dont vous n'avez plus besoin.

Pour aller plus loin, explorez les chapitres dédiés aux événements souris, aux événements clavier, à la gestion de la soumission de formulaire et au déclenchement d'événements personnalisés pour créer des interfaces plus riches et pilotées par les événements.

Pratique