addEventListener et objet Event
Attachez des écouteurs d’événements, recevez l’objet Event, utilisez preventDefault et stopPropagation, puis comprenez la propagation des événements vers les parents.
addEventListener et objet Event est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que sont les événements ?
Les événements sont des signaux déclenchés par le navigateur lorsqu’une action se produit : l’utilisateur clique, appuie sur une touche ou déplace la souris, la page se charge ou une requête réseau se termine. JavaScript réagit aux événements en attachant des écouteurs d’événements.
Syntaxe de addEventListener
element.addEventListener(type, handler) associe une fonction à exécuter lorsque l’événement se déclenche. Le gestionnaire reçoit un objet Event contenant des informations sur ce qui s’est produit.
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});Types d’événements courants
Souris : click, dblclick, mouseenter, mouseleave, mousemove. Clavier : keydown, keyup, keypress. Formulaire : submit, input, change, focus, blur. Document : DOMContentLoaded, load. Fenêtre : resize, scroll.
// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);
// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));L’objet événement
Chaque gestionnaire reçoit un objet Event. Propriétés essentielles : e.target (l’élément qui a déclenché l’événement), e.currentTarget (l’élément auquel l’écouteur est attaché), e.type (le nom de l’événement) et e.timeStamp.
document.addEventListener('click', (e) => {
console.log(e.type); // 'click'
console.log(e.target); // element that was clicked
console.log(e.currentTarget); // element with the listener (document)
console.log(e.timeStamp); // ms since page load
});preventDefault()
event.preventDefault() empêche l’action par défaut du navigateur. Utilisez-le pour empêcher l’envoi d’un formulaire, la navigation d’un lien ou l’ouverture du menu contextuel lors d’un clic droit dans un jeu.
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop page reload
// validate and process form data with JavaScript
});
link.addEventListener('click', (e) => {
e.preventDefault(); // handle SPA navigation manually
router.navigate(e.target.href);
});stopPropagation()
event.stopPropagation() empêche l’événement de remonter dans l’arbre du DOM. Utilisez-le lorsqu’un gestionnaire attaché à un élément interne ne doit pas déclencher celui de l’élément externe.
modal.addEventListener('click', (e) => {
e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
closeModal(); // only fires for clicks outside modal
});Propagation des événements
Les événements remontent dans l’arbre : après s’être déclenchés sur la cible, ils se déclenchent sur le parent, puis le grand-parent, jusqu’au document. C’est le fonctionnement de la délégation d’événements : attachez un seul écouteur à un parent et utilisez e.target pour identifier l’enfant réellement cliqué.
// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('Clicked:', e.target.textContent);
}
});Modèle de délégation d’événements
La délégation d’événements consiste à écouter les événements sur un élément parent plutôt qu’à attacher des écouteurs à chaque enfant. Elle est plus efficace et prend automatiquement en charge les enfants ajoutés dynamiquement.
// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));
// Use delegation:
list.addEventListener('click', (e) => {
if (e.target.closest('li')) handleClick(e);
});Événements clavier
Les événements clavier se déclenchent lorsqu’une touche est enfoncée. Utilisez e.key (une chaîne comme 'Enter', 'Escape' ou 'a') dans le code moderne. L’ancien code utilisait e.keyCode (obsolète). e.metaKey, e.ctrlKey et e.shiftKey détectent les touches modificatrices.
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
if (e.key === 'Enter' && e.ctrlKey) submitForm();
});Supprimer des écouteurs d’événements
Utilisez removeEventListener pour détacher un écouteur. Le gestionnaire doit être la même référence de fonction : les fonctions anonymes ne peuvent pas être supprimées. Avec React ou Vue, vous ne gérez généralement pas cela manuellement.
function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);Option once
Passez { once: true } comme troisième argument pour supprimer automatiquement l’écouteur après son premier déclenchement. Cette option est utile pour les actions ponctuelles, comme la fermeture d’un écran de démarrage.
document.querySelector('#start').addEventListener('click', startApp, { once: true });Option capture
Par défaut, les écouteurs se déclenchent pendant la phase de propagation (vers le haut). Passez { capture: true } pour les déclencher pendant la phase de capture (vers le bas, avant les écouteurs propres à la cible).
Vérification rapide
Quelle méthode empêche le navigateur d’exécuter le comportement par défaut d’un événement ?
Récapitulatif : événements du DOM
addEventListener(type, handler) associe des écouteurs. L’objet Event fournit target, type et des méthodes de contrôle. preventDefault() bloque les comportements par défaut. stopPropagation() arrête la propagation. Utilisez la délégation d’événements pour gagner en efficacité et gérer les enfants dynamiques. Supprimez les écouteurs pour éviter les fuites de mémoire.
Questions Fréquemment Posées
La leçon « addEventListener et objet Event » est-elle gratuite ?
Oui — le texte complet de « addEventListener et objet Event » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « addEventListener et objet Event » ?
Attachez des écouteurs d’événements, recevez l’objet Event, utilisez preventDefault et stopPropagation, puis comprenez la propagation des événements vers les parents. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « addEventListener et objet Event » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- querySelector et querySelectorAll
- addEventListener et objet Event
- Modifier le contenu : textContent, innerHTML, classList
- Créer et ajouter des éléments