Historique des conversations
Chargement...
Chapitre 7 : Le DOM (Document Object Model)
1. Qu'est-ce qu'un événement ?
Un événement est une action qui se produit dans le navigateur (clic, saisie, chargement de page, etc.). JavaScript permet de réagir à ces événements.
2. addEventListener()
La méthode recommandée pour gérer les événements :
<button id="monBouton">Cliquez-moi</button>
<script>
let bouton = document.getElementById("monBouton");
bouton.addEventListener("click", function() {
alert("Bouton cliqué !");
});
</script>3. Types d'événements courants
Événements de souris
element.addEventListener("click", () => {}); // Clic
element.addEventListener("dblclick", () => {}); // Double-clic
element.addEventListener("mouseenter", () => {}); // Survol
element.addEventListener("mouseleave", () => {}); // Sortie du survol
element.addEventListener("mousemove", () => {}); // MouvementÉvénements de clavier
document.addEventListener("keydown", () => {}); // Touche enfoncée
document.addEventListener("keyup", () => {}); // Touche relâchée
document.addEventListener("keypress", () => {}); // Touche presséeÉvénements de formulaire
input.addEventListener("input", () => {}); // Saisie en cours
input.addEventListener("change", () => {}); // Valeur modifiée
form.addEventListener("submit", () => {}); // SoumissionÉvénements de page
window.addEventListener("load", () => {}); // Page chargée
window.addEventListener("resize", () => {}); // Fenêtre redimensionnée
window.addEventListener("scroll", () => {}); // Défilement4. L'objet Event
Contient des informations sur l'événement :
bouton.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);
});5. Propagation des événements
Bubbling (remontée)
L'événement remonte de l'élément enfant vers le parent :
<div id="parent">
<button id="enfant">Cliquez</button>
</div>
<script>
document.getElementById("parent").addEventListener("click", () => {
console.log("Parent cliqué");
});
document.getElementById("enfant").addEventListener("click", () => {
console.log("Enfant cliqué");
});
// Clic sur le bouton affiche :
// "Enfant cliqué"
// "Parent cliqué"
</script>stopPropagation()
Empêche la propagation :
enfant.addEventListener("click", function(event) {
event.stopPropagation(); // Arrête la propagation
console.log("Enfant cliqué");
});
// Maintenant seul "Enfant cliqué" s'affiche6. preventDefault()
Empêche le comportement par défaut :
<a href="https://google.com" id="lien">Google</a>
<script>
document.getElementById("lien").addEventListener("click", function(event) {
event.preventDefault(); // Empêche la navigation
console.log("Lien cliqué mais pas de navigation");
});
</script>Validation de formulaire
<form id="monForm">
<input type="text" id="nom" required>
<button type="submit">Envoyer</button>
</form>
<script>
document.getElementById("monForm").addEventListener("submit", function(event) {
event.preventDefault(); // Empêche l'envoi
let nom = document.getElementById("nom").value;
if (nom.length < 3) {
alert("Le nom doit contenir au moins 3 caractères");
} else {
alert("Formulaire valide !");
}
});
</script>7. Délégation d'événements
Attacher un événement au parent pour gérer les enfants :
<ul id="liste">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
document.getElementById("liste").addEventListener("click", function(event) {
if (event.target.tagName === "LI") {
console.log("Cliqué sur:", event.target.textContent);
}
});
</script>8. Exercice pratique
<!DOCTYPE html>
<html>
<head>
<title>Exercice Événements</title>
</head>
<body>
<button id="btn">Compteur: 0</button>
<input type="text" id="texte" placeholder="Tapez quelque chose">
<p id="affichage"></p>
<script>
// Compteur de clics
let compteur = 0;
let btn = document.getElementById("btn");
btn.addEventListener("click", function() {
compteur++;
btn.textContent = "Compteur: " + compteur;
});
// Affichage en temps réel
let input = document.getElementById("texte");
let affichage = document.getElementById("affichage");
input.addEventListener("input", function() {
affichage.textContent = "Vous avez tapé: " + input.value;
});
// Détection de touche
document.addEventListener("keydown", function(event) {
if (event.key === "Escape") {
console.log("Touche Échap pressée");
}
});
</script>
</body>
</html>Conclusion
Vous savez maintenant gérer les événements en JavaScript ! Dans le prochain chapitre, nous allons découvrir l'asynchronisme.
Évaluation des acquis
Correction immédiate
Quiz du chapitre 7
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Sélection par ID
Atelier #1Récupère l'élément HTML ayant l'ID 'monTitre' dans une variable.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
const titre = document.getElementById("monTitre");
#2 — Modification de texte
Atelier #2Change le texte d'un élément sélectionné pour qu'il affiche 'Nouveau Titre'.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
titre.textContent = "Nouveau Titre";
#3 — Modification du CSS
Atelier #3Change la couleur de fond d'un élément via JS pour la mettre en rouge.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
titre.style.backgroundColor = "red";
#4 — Query Selector
Atelier #4Sélectionne le premier paragraphe ayant la classe '.texte-bleu' avec querySelector.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
const p = document.querySelector(".texte-bleu");
#5 — Création d'élément
Atelier #5Crée une nouvelle balise <li> et ajoute-la à la fin d'une liste (ul).
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
const nouvelleLigne = document.createElement("li");
nouvelleLigne.textContent = "Nouvel élément";
document.querySelector("ul").appendChild(nouvelleLigne);