JavaScript Academy · Leçon

Bases de addEventListener

Attachez des gestionnaires aux éléments pour gérer les événements.

Bases de addEventListener est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Réagir aux événements

Les événements permettent à votre code de réagir aux actions de l’utilisateur, comme les clics, les pressions de touches et les envois de formulaires. addEventListener est la méthode standard pour s’y abonner.

Syntaxe de base

Appelez addEventListener avec un nom d’événement et une fonction gestionnaire. Le gestionnaire s’exécute chaque fois que l’événement se produit.

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

Gestionnaires nommés

Vous pouvez transmettre une fonction nommée. Cela maintient le code organisé et, surtout, vous permet de supprimer l’écouteur plus tard.

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

Plusieurs écouteurs

Contrairement à l’ancienne propriété onclick, vous pouvez attacher plusieurs écouteurs au même événement sans qu’ils s’écrasent les uns les autres.

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

Pour cesser l’écoute, appelez removeEventListener avec le même nom d’événement et la même référence de fonction que ceux utilisés pour l’ajout.

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

Les fonctions anonymes ne peuvent pas être supprimées

Une fonction fléchée écrite directement crée une nouvelle référence à chaque fois et ne peut donc pas être supprimée plus tard. Utilisez une référence nommée si vous devez la supprimer.

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

L’option once

Transmettre { once: true } supprime automatiquement l’écouteur après sa première exécution.

btn.addEventListener("click", init, { once: true });

L’option capture

Par défaut, les écouteurs s’exécutent pendant la phase de propagation. { capture: true } les fait s’exécuter pendant la phase de capture à la place.

parent.addEventListener("click", handler, { capture: true });

L’option passive

{ passive: true } garantit que vous n’appellerez pas preventDefault, ce qui permet au navigateur d’optimiser les performances du défilement.

window.addEventListener("scroll", onScroll, { passive: true });

L’option signal

Un signal AbortController permet de supprimer un écouteur (ou plusieurs) en déclenchant une interruption, ce qui est pratique pour le nettoyage.

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

this dans les gestionnaires

Dans une fonction gestionnaire ordinaire, this désigne l’élément auquel l’écouteur est attaché. Les fonctions fléchées ne redéfinissent pas this.

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

Vérification rapide

Testez les règles de suppression.

Récapitulatif

addEventListener(type, handler, options) s’abonne aux événements et prend en charge plusieurs écouteurs. Supprimez-les avec removeEventListener en utilisant la même référence ; privilégiez donc les fonctions nommées. Les options utiles comprennent once, capture, passive et signal. Dans les gestionnaires ordinaires, this désigne l’élément cible.

Questions Fréquemment Posées

La leçon « Bases de addEventListener » est-elle gratuite ?

Oui — le texte complet de « Bases de addEventListener » 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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Bases de addEventListener » ?

Attachez des gestionnaires aux éléments pour gérer les événements. Tu pratiques JavaScript 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 JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript 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 1 sur 4.

Combien de temps prend la leçon « Bases de addEventListener » ?

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 JavaScript Academy ?

Oui. Chaque leçon JavaScript 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

← Retour à JavaScript Academy