Les événements
12 min · Intermédiaire · 7 août 2026
Écouter un clic
javascript
const bouton = document.querySelector("#mon-bouton");
bouton.addEventListener("click", () => {
console.log("Bouton clique !");
});L’objet événement
javascript
const champ = document.querySelector("#mon-champ");
champ.addEventListener("input", (event) => {
console.log("Valeur actuelle :", event.target.value);
});event.target désigne l’élément qui a déclenché l’événement : très utile pour lire sa valeur ou son état au moment précis de l’interaction.
Empêcher le comportement par défaut
javascript
const formulaire = document.querySelector("form");
formulaire.addEventListener("submit", (event) => {
event.preventDefault(); // empeche le rechargement de la page
console.log("Formulaire intercepte, pas de rechargement");
});Astuce
event.preventDefault() est indispensable dès qu’on veut gérer une soumission de formulaire en JavaScript sans recharger la page.
À toi de jouer
La page contient <button id="compteur">0</button>. Écris une fonction activerCompteur() qui ajoute un écouteur de clic sur ce bouton : à chaque clic, le nombre affiché dans le bouton doit s’incrémenter de 1.
html
<!-- HTML -->
<button id="compteur">0</button>
// JS
function activerCompteur() {
// Ajoute un ecouteur de clic qui incremente le texte du bouton
}