Comprendre ce qu'est un événement, brancher une fonction avec addEventListener, utiliser l'objet événement (target, key), et réagir à la souris et au clavier.
Le cinéma Rif de Tanger veut une page de réservation : on choisit le nombre de places avec des boutons + et −, l'affiche s'éclaire au survol de la souris, et le bouton « Réserver » affiche un récapitulatif. Rien de tout cela ne se passe au chargement de la page : le code doit attendre que le visiteur agisse. C'est la programmation événementielle.
addEventListener('click', ajouter) installe un écouteur sur le bouton +. Rien ne s'exécute encore.
Un événement est quelque chose qui arrive dans la page : un clic, une touche, la souris qui bouge, un champ modifié, la page chargée. Le programme attend et réagit : c’est la programmation événementielle.
const plus = document.querySelector('#plus');
plus.addEventListener('click', () => { // type d'événement, fonction à exécuter
places++;
nb.textContent = places;
});
removeEventListener débranche une fonction nommée ;onclick="..." dans le HTML est à éviter.| Famille | Événements |
|---|---|
| souris (MouseEvents) | click, dblclick, mouseover, mouseout, mousemove, mousedown, mouseup |
| clavier | keydown, keyup |
| formulaire | input, change, focus, blur, submit (leçon suivante) |
| page | DOMContentLoaded, load, scroll, resize |
La fonction reçoit un objet qui décrit l’événement :
document.addEventListener('click', (e) => {
console.log(e.target); // l'élément cliqué
console.log(e.clientX, e.clientY); // position de la souris
});
champ.addEventListener('keydown', (e) => {
console.log('Touche :', e.key); // "a", "Enter", "Escape"...
});
e.preventDefault() annule le comportement normal (suivre un lien, envoyer un formulaire). e.stopPropagation() empêche l’événement de remonter aux parents.
Un clic sur un <li> est aussi un clic sur le <ul> qui le contient, puis sur le <body> : l’événement remonte (bouillonnement). On en profite pour écouter une seule fois sur le parent : c’est la délégation d’événements.
On installe la sonnette une fois (addEventListener). Ensuite, à chaque fois que quelqu'un appuie (l'événement click), elle sonne (la fonction s'exécute). Entre deux visites, elle attend.
bouton.addEventListener('click', () => { console.log('Ding dong !'); });
La fonction reçoit un objet événement qui décrit ce qui s'est passé : sur quel élément (target), quelle touche (key), où était la souris (clientX).
document.addEventListener('keydown', (e) => { console.log('Touche :', e.key); });
Quel événement utiliser pour : (1) un clic sur un bouton ; (2) chaque caractère tapé dans un champ ; (3) le choix dans une liste <select> ; (4) la page entièrement chargée ; (5) la souris qui quitte une image ?
1. click 2. input (ou keydown / keyup pour les touches) 3. change 4. DOMContentLoaded (HTML prêt) ou load (images comprises) 5. mouseout (ou mouseleave)
Une liste #films contient 30 <li>. Plutôt que 30 écouteurs, écrivez un seul écouteur sur la liste qui affiche le titre du film cliqué.
document.querySelector('#films').addEventListener('click', (e) => { const li = e.target.closest('li'); if (li) console.log('Film choisi :', li.textContent); }); // L'événement « remonte » (bouillonnement) du li jusqu'à la liste : // c'est la délégation d'événements.
Quand le visiteur appuie sur Échap, cachez l'élément #fenetre.
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { document.querySelector('#fenetre').hidden = true; } });