📅 SAISON A Semaine 5 Épisode 2 - Les Évènements

📚 Notions du jour

Écouteurs d’événement :

• addEventListener
• le paramètre event

---

🎯 addEventListener : Le Pont entre l’Utilisateur et le Code

Aujourd’hui, j’ai découvert la gestion des événements avec addEventListener. Cette méthode permet d’écouter les actions de l’utilisateur (clics, saisies, survols…) et d’y répondre en temps réel. En gros, c’est ce qui transforme une page statique en une expérience interactive !

Exemple : Écouter un clic sur un bouton

// Select a button from the DOM
const submitButton = document.querySelector("#submit-button");

// Add an event Listener for 'click' event
submitButton.addEventListener("click", () => {
  console.log("Button clicked!");
  // Here, we could modify the DOM, send a request, etc.
});

Sans addEventListener, impossible de réagir à un clic sur un bouton, de valider un formulaire, ou de déclencher une animation.

---

🔍 Le Paramètre event : Tout Savoir sur l’Action de l’Utilisateur

Quand un événement se produit, JavaScript transmet un objet event à la fonction de rappel (callback). Cet objet est une mine d’informations :

• Quel élément a déclenché l’événement ? (event.target)
• Quelle touche du clavier a été pressée ? (event.key)
• Quelles sont les coordonnées de la souris ? (event.clientX, event.clientY)
• L’événement a-t-il été annulé par défaut ? (event.preventDefault())

Exemple 1 : Récupérer la cible d’un clic

const myButton = document.querySelector("#my-button");

myButton.addEventListener("click", (event) => {
  // `event.target` returns the element that triggered the event
  console.log("Élément cliqué :", event.target);
  event.target.style.backgroundColor = "lightblue"; // Change the background color
});

Exemple 2 : Empêcher le comportement par défaut d’un formulaire

// Select the form from the DOM
const userForm = document.querySelector("#user-form");

// Add an event listener for the 'submit' event
userForm.addEventListener("submit", (event) => {
  // Prevent the default form submission behavior
  event.preventDefault();

  // Get the input values
  const nameInput = document.querySelector("#name-input").value;
  const emailInput = document.querySelector("#email-input").value;

  // Validate the inputs (example: check if they are not empty)
  if (!nameInput || !emailInput) {
    console.log("Please fill in all fields!");
  } else {
    // If validation passes, proceed with custom logic (e.g., send data to a server)
    console.log("Form submitted successfully!");
    console.log("Name:", nameInput);
    console.log("Email:", emailInput);

    // Optionally, reset the form after submission
    userForm.reset();
  }
});

Exemple 3 : Récupérer la touche pressée sur le clavier

document.addEventListener("keydown", (event) => {
  // Display the striked key
  console.log("Touche pressée :", event.key);
});

---

📚 La Documentation : Le GPS du Développeur

Avec addEventListener, il y a beaucoup de possibilités mais comment savoir quels événements écouter ? La documentation MDN (MDN) est là pour ça :

• Elle liste tous les événements disponibles (click, submit, keydown, mouseover…).
• Elle explique les propriétés de l’objet event pour chaque type d’événement.
• Elle donne des exemples concrets pour chaque cas d’usage.

---

🛠️ Ce Que J’ai Appris à Faire Aujourd’hui

1. Écouter un clic sur un bouton et afficher un message.
2. Réagir à une saisie clavier pour déplacer un objet dans un jeux par exemple.
3. Empêcher le comportement par défaut d’un lien ou d’un formulaire avec event.preventDefault().
4. Combiner plusieurs événements pour créer des interactions complexes (ex: un menu qui s’ouvre au survol et au clic).

---

⌨️ Challenge du jour

Pas de challenge aujourd'hui. C'est l'occasion de réviser, faire de la veille et s'exercer en autonomie.

🚀 Prochaine Étape

Demain, c'est journée en pair-programming avec un collègue de promo où nous allons combiner les événements avec les manipulations du DOM pour créer une mini-application interactive, comme un jeu ou un quiz. Ce sera l'occasion de s'exercer et de partager nos façon de faire pour réaliser ce challenge.