Événements et interactivité

Les événements sont des choses qui se produisent dans le navigateur — un utilisateur clique sur un bouton, tape dans un champ texte, déplace la souris, soumet un formulaire, ou la page finit de se charger. JavaScript utilise un modèle de programmation événementiel, ce qui signifie que ton code attend que des événements se produisent puis y répond.

Voici quelques événements courants avec lesquels tu vas travailler :

Le flux fonctionne comme ceci :

1. Quelque chose se produit dans le navigateur (l'utilisateur clique sur un bouton).
2. Le navigateur crée un objet événement décrivant ce qui s'est passé.
3. Si ton code a enregistré un écouteur pour cet événement sur cet élément, ta fonction de callback s'exécute.

C'est ce qui rend les pages web interactives — au lieu d'exécuter tout ton code d'un coup, tu mets en place des écouteurs qui répondent quand l'utilisateur effectue une action.

La manière standard d'écouter les événements est avec addEventListener() :

const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
  console.log('Le bouton a été cliqué !');
});

La méthode prend deux arguments obligatoires :

1. Type d'événement — une chaîne de caractères comme 'click', 'input', 'keydown', etc.
2. Fonction de callback — la fonction à exécuter quand l'événement se produit.

Tu peux aussi passer une fonction nommée :

function handleClick() {
  console.log('Cliqué !');
}

button.addEventListener('click', handleClick);

Retirer un écouteur nécessite une référence à la même fonction :

button.removeEventListener('click', handleClick);

C'est pourquoi les fonctions nommées sont utiles — tu ne peux pas retirer une fonction anonyme parce que tu n'as pas de référence à passer à removeEventListener.

Pourquoi addEventListener est meilleur que onclick :

Tu verras peut-être du code plus ancien utilisant des attributs HTML comme onclick ou l'affectation de propriété :

<!-- Attribut HTML — à éviter -->
<button onclick="alert('salut')">Clique</button>

// Affectation de propriété — permet seulement un gestionnaire
button.onclick = function() { console.log('cliqué'); };

Le problème avec ces approches :

• Les attributs HTML mélangent JavaScript et HTML, rendant le code plus difficile à maintenir.
• L'affectation de propriété permet seulement un gestionnaire par événement. Si tu définis onclick deux fois, le premier gestionnaire est perdu.
• addEventListener permet plusieurs gestionnaires pour le même événement et fournit plus de contrôle (comme la capture vs la propagation).

Utilise toujours addEventListener en JavaScript moderne.

Quand un événement se déclenche, le navigateur passe un objet événement à ta fonction de callback. Cet objet contient des informations sur ce qui s'est passé :

button.addEventListener('click', function(event) {
  console.log(event.type);   // 'click'
  console.log(event.target); // l'élément qui a été cliqué
});

Propriétés et méthodes utiles de l'objet événement :

• event.target — l'élément qui a déclenché l'événement (l'élément sur lequel l'utilisateur a réellement cliqué, tapé, etc.).
• event.currentTarget — l'élément auquel l'écouteur est attaché (identique à this dans les fonctions normales).
• event.type — le type d'événement sous forme de chaîne de caractères ('click', 'keydown', etc.).

event.preventDefault() arrête le comportement par défaut du navigateur pour un événement :

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Empêche le formulaire d'être soumis et de recharger la page
  console.log('Données du formulaire traitées par JavaScript à la place');
});

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault(); // Empêche le lien de naviguer
  console.log('Navigation empêchée');
});

event.stopPropagation() empêche l'événement de remonter vers les éléments parents. Cela est lié à la délégation d'événements, un pattern puissant où tu ajoutes un seul écouteur à un élément parent au lieu d'un à chaque enfant :

const list = document.querySelector('ul');

list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Cliqué sur :', event.target.textContent);
  }
});

La délégation d'événements est efficace parce que tu n'as besoin que d'un seul écouteur quel que soit le nombre d'éléments de liste — même les éléments ajoutés dynamiquement après que l'écouteur soit attaché seront gérés.