Semaine 3 - Jour 3 : Événements JavaScript

Rendre vos pages interactives avec les événements

Les événements sont des actions qui se produisent dans le navigateur : un clic, une frappe clavier, un survol de souris, la soumission d'un formulaire... JavaScript peut "écouter" ces événements et réagir.

Applications concrètes : Boutons cliquables, validation de formulaires en temps réel, menus interactifs, animations au survol, raccourcis clavier...

Aujourd'hui : addEventListener(), types d'événements courants, l'objet event, et preventDefault().

1. addEventListener()

La méthode moderne pour écouter les événements. Peut gérer plusieurs listeners sur le même élément.

// Syntaxe de base
element.addEventListener('type', function(event) {
  // Code à exécuter
});

// Exemple : Clic sur un bouton
let btn = document.querySelector('button');
btn.addEventListener('click', function() {
  console.log('Bouton cliqué !');
});

// Avec une fonction fléchée
btn.addEventListener('click', () => {
  alert('Clic détecté');
});

Démo interactive

En attente de clic...

2. Types d'événements courants

click : Clic de souris
input : Modification de champ
change : Changement validé
mouseover : Survol

// Click : Clic de souris
btn.addEventListener('click', () => {});

// Input : Frappe clavier (temps réel)
input.addEventListener('input', () => {
  console.log(input.value);
});

// Change : Changement validé (perd le focus)
select.addEventListener('change', () => {});

// Mouseover : Survol de souris
div.addEventListener('mouseover', () => {
  div.style.backgroundColor = 'red';
});

Démo interactive

Texte saisi : aucun
Survolez-moi avec la souris !

3. L'objet event

Chaque événement passe un objet event en paramètre contenant des informations utiles.

element.addEventListener('click', (event) => {
  // Type d'événement
  console.log(event.type); // 'click'

  // Élément qui a déclenché l'événement
  console.log(event.target);

  // Position de la souris
  console.log(event.clientX, event.clientY);

  // Touche enfoncée (pour clavier)
  console.log(event.key);
});

Démo interactive

Cliquez n'importe où dans cette zone
Informations sur l'événement apparaîtront ici

4. event.preventDefault()

Empêche le comportement par défaut d'un événement (ex: soumission de formulaire, clic sur lien).

// Empêcher la soumission d'un formulaire
form.addEventListener('submit', (event) => {
  event.preventDefault(); // Bloque l'envoi
  console.log('Formulaire validé côté client');
});

// Empêcher le clic sur un lien
lien.addEventListener('click', (event) => {
  event.preventDefault();
  alert('Navigation bloquée');
});

// Utile pour la validation avant soumission

Démo interactive

Le formulaire ne rechargera pas la page !
Console JavaScript Interactive - Testez les événements !
Prêt à exécuter votre code...

Exemples pratiques - Compteur interactif

// Créer un compteur avec boutons +/-

let compteur = 0;
let affichage = document.querySelector('.compteur');
let btnPlus = document.querySelector('.btn-plus');
let btnMoins = document.querySelector('.btn-moins');
let btnReset = document.querySelector('.btn-reset');

// Fonction pour mettre à jour l'affichage
function mettreAJour() {
  affichage.textContent = compteur;
  // Changer la couleur selon la valeur
  if (compteur > 0) {
    affichage.style.color = 'green';
  } else if (compteur < 0) {
    affichage.style.color = 'red';
  } else {
    affichage.style.color = 'black';
  }
}

// Événements
btnPlus.addEventListener('click', () => {
  compteur++;
  mettreAJour();
});

btnMoins.addEventListener('click', () => {
  compteur--;
  mettreAJour();
});

btnReset.addEventListener('click', () => {
  compteur = 0;
  mettreAJour();
});

Testez ces exemples dans la console interactive ci-dessus !

Froggiesplaining :


Objectifs de ce cours :
✅ Comprendre le système d'événements JavaScript
✅ Utiliser addEventListener() pour écouter les événements
✅ Connaître les types d'événements courants (click, input, change, mouseover)
✅ Exploiter l'objet event pour obtenir des informations
✅ Utiliser preventDefault() pour contrôler le comportement

Points clés à retenir :
• addEventListener('type', callback) : Écouter un événement
• click : Clic de souris (le plus courant)
• input : Saisie temps réel dans un champ (à chaque frappe)
• change : Changement validé (quand le champ perd le focus)
• submit : Soumission de formulaire
• event.target : Élément qui a déclenché l'événement
• event.preventDefault() : Bloquer le comportement par défaut
• Toujours utiliser addEventListener (pas onclick dans le HTML)

Exercice pratique :
1. Créez un bouton qui affiche une alerte au clic
2. Créez un champ input qui affiche sa valeur en temps réel
3. Créez une div qui change de couleur au survol (mouseover/mouseout)
4. Créez un formulaire qui affiche les données au lieu de les envoyer
5. Créez un bouton qui compte le nombre de clics
6. Bonus : Créez un compteur avec boutons + et -
7. Bonus 2 : Détectez la touche Enter dans un champ input (event.key)

Froggie explain

GitHub - eCrea