Dans ce cours, nous allons explorer la gestion des évènements en développement web. Nous verrons comment utiliser HTML, CSS et JavaScript ensemble pour créer des interfaces interactives, comprendre les écouteurs d'évènements, la propagation des évènements, ainsi que les bonnes pratiques pour une programmation évènementielle efficace.

   🎯 Syntaxe de base :
   element.addEventListener('evenement', fonction, options);
   
   Exemple concret :
   <button id="monBouton">Cliquez-moi</button>
   
   // JavaScript
   const bouton = document.getElementById('monBouton');
   bouton.addEventListener('click', function() {
       alert('Bouton cliqué !');
   });
   
   // Ou avec une fonction fléchée
   bouton.addEventListener('click', () => {
       console.log('Clic détecté !');
   });
   

   📝 Propriétés utiles de l'objet Event :
   
   button.addEventListener('click', function(event) {
       console.log('Type:', event.type);           // "click"
       console.log('Target:', event.target);       // élément cliqué
       console.log('Position X:', event.clientX);  // position souris
       console.log('Position Y:', event.clientY);  // position souris
       console.log('Touche Ctrl:', event.ctrlKey); // Ctrl pressée ?
   });
   
   // Pour les évènements clavier
   input.addEventListener('keydown', function(event) {
       console.log('Touche:', event.key);      // "Enter", "a", "Escape"
       console.log('Code:', event.code);       // "KeyA", "Enter"
       if (event.key === 'Enter') {
           console.log('Entrée pressée !');
       }
   });
   

   🌊 Phases de propagation :
   
   <div id="parent">
       <button id="enfant">Cliquez</button>
   </div>
   
   1️⃣ CAPTURE : document → parent → enfant
   2️⃣ TARGET : évènement sur l'élément cible
   3️⃣ BUBBLING : enfant → parent → document (par défaut)
   
   // Écouter en phase de capture
   parent.addEventListener('click', handler, true); // 3ème param = true
   
   // Écouter en phase de bubbling (défaut)
   parent.addEventListener('click', handler); // ou false
   
   // Arrêter la propagation
   button.addEventListener('click', function(event) {
       event.stopPropagation(); // Évite la remontée
   });
   

   🎯 Délégation d'évènements (Event Delegation) :
   
   // Au lieu d'écouter chaque bouton individuellement
   const boutons = document.querySelectorAll('.btn');
   boutons.forEach(btn => btn.addEventListener('click', handler));
   
   // Écoutez sur le parent (plus efficace !)
   document.getElementById('container').addEventListener('click', function(event) {
       if (event.target.classList.contains('btn')) {
           // Traiter le clic sur le bouton
           console.log('Bouton cliqué:', event.target.textContent);
       }
   });
   
   🔄 Supprimer des écouteurs :
   function monHandler() { /* ... */ }
   element.addEventListener('click', monHandler);
   element.removeEventListener('click', monHandler); // Même référence !
   
   ⏱️ Debouncing (éviter trop d'appels) :
   let timeout;
   window.addEventListener('resize', function() {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
           console.log('Redimensionnement terminé');
       }, 250);
   });
   

   💡 To-Do List interactive :
   
   <!-- HTML -->
   <div id="todoApp">
       <input type="text" id="newTask" placeholder="Nouvelle tâche...">
       <button id="addBtn">Ajouter</button>
       <ul id="taskList"></ul>
   </div>
   
   <!-- JavaScript -->
   <script>
   document.addEventListener('DOMContentLoaded', function() {
       const newTaskInput = document.getElementById('newTask');
       const addBtn = document.getElementById('addBtn');
       const taskList = document.getElementById('taskList');
   
       // Ajouter une tâche
       function addTask() {
           const taskText = newTaskInput.value.trim();
           if (taskText) {
               const li = document.createElement('li');
               li.innerHTML = `${taskText} <button class="delete">×</button>`;
               taskList.appendChild(li);
               newTaskInput.value = '';
           }
       }
   
       // Écouteurs
       addBtn.addEventListener('click', addTask);
       newTaskInput.addEventListener('keypress', function(event) {
           if (event.key === 'Enter') addTask();
       });
   
       // Délégation pour supprimer
       taskList.addEventListener('click', function(event) {
           if (event.target.classList.contains('delete')) {
               event.target.parentElement.remove();
           }
       });
   });
   </script>
   

• 🔸 addEventListener() est la méthode moderne recommandée
• 🔸 L'objet event contient des informations précieuses
• 🔸 Les évènements "remontent" dans le DOM (bubbling)
• 🔸 La délégation d'évènements améliore les performances
• 🔸 Toujours nettoyer les écouteurs pour éviter les fuites mémoire
• 🔸 Utiliser preventDefault() pour contrôler le comportement par défaut

Objectif pédagogique : Maîtriser l'ajout d'écouteurs d'évènements avec addEventListener() et comprendre les évènements de base.

Énoncé :
1. Créez un bouton HTML avec l'id "monBouton" et ajoutez un écouteur qui affiche "Hello World!" dans la console au clic.
Conseil : Utilisez addEventListener() plutôt que onclick.

2. Ajoutez un second écouteur sur le même bouton qui change la couleur du texte en rouge. Astuce : Un élément peut avoir plusieurs écouteurs pour le même évènement.

Objectif pédagogique : Utiliser les propriétés de l'objet Event pour récupérer des informations sur l'évènement.

Énoncé :
1. Créez un div de 200x200px avec un fond bleu. Ajoutez un écouteur de clic qui affiche les coordonnées X et Y de la souris.
Rappel : Utilisez event.clientX et event.clientY.

2. Ajoutez un écouteur sur un input text qui détecte quand l'utilisateur presse la touche "Enter" et affiche le contenu. Procédure : Écoutez 'keydown' et vérifiez event.key === 'Enter'

Objectif pédagogique : Comprendre la propagation des évènements et utiliser la délégation pour optimiser les performances.

Énoncé :
Créez une liste <ul> avec 3 éléments <li> contenant chacun un bouton "Supprimer" :
1. Utilisez la délégation d'évènements pour gérer tous les clics depuis le <ul>
2. Supprimez l'élément <li> correspondant quand on clique sur "Supprimer"

Objectif pédagogique : Maîtriser la gestion des formulaires avec validation en temps réel et preventDefault().

Énoncé :
1. Créez un formulaire avec email et mot de passe. Validez l'email en temps réel (format valide).
2. Empêchez la soumission si les champs sont invalides et affichez des messages d'erreur.

Objectif pédagogique : Combiner plusieurs types d'évènements pour créer une application interactive avec drag & drop.

Énoncé :
Créez un système de glisser-déposer simple :
1. Une div "source" draggable et une div "cible" où déposer
2. Gérez les évènements dragstart, dragover, et drop pour permettre le déplacement

Objectif pédagogique : Manipuler les styles CSS via les événements et comprendre mouseover/mouseout.

Énoncé :
1. Créez un carré de 150x150px avec un fond vert. Faites-le passer en rouge au survol de la souris.
Conseil : Utilisez les événements mouseover et mouseout.

2. Ajoutez un effet supplémentaire : le carré doit s'agrandir à 200x200px pendant le survol. Astuce : Modifiez la propriété width et height dans l'événement.

Objectif pédagogique : Créer une interface interactive avec mise à jour dynamique.

Énoncé :
1. Créez un compteur avec un bouton "+" et un bouton "-" qui incrémente/décrémente une valeur affichée.
Rappel : La valeur initiale est 0 et doit être stockée dans une variable.

2. Ajoutez un bouton "Reset" qui remet le compteur à 0. Procédure : Utilisez textContent pour mettre à jour l'affichage.

Objectif pédagogique : Gérer des événements complexes sur plusieurs éléments avec gestion dynamique du DOM.

Énoncé :
Créez une galerie avec 3 miniatures d'images et une zone d'affichage principale :
1. Au clic sur une miniature, l'image principale doit changer pour afficher la version agrandie
2. Ajoutez un effet visuel (bordure colorée) sur la miniature sélectionnée

Objectif pédagogique : Créer un système interactif complexe avec gestion d'état et feedback visuel.

Énoncé :
1. Créez 5 étoiles vides qui se remplissent au survol de la souris (jusqu'à l'étoile survolée)
2. Au clic, sauvegardez la note sélectionnée et affichez-la sous forme textuelle ("3/5")

Objectif pédagogique : Créer une application de dessin simple avec gestion des événements de souris.

Énoncé :
Créez une zone de dessin avec Canvas :
1. Dessinez un trait qui suit le mouvement de la souris quand le bouton est enfoncé
2. Ajoutez un sélecteur de couleur pour changer la couleur du trait