Les évènements en JavaScript

Maintenant que vous savez sélectionner des éléments du DOM et manipuler leur contenu, nous allons découvrir comment vous pouvez "écouter" le DOM. Vous allez pouvoir détecter les actions de l'utilisateur·ice et d'y réagir.

Les events

En JavaScript, une action de l'utilisateur·ice est appelée un "event". Un event est déclenché automatiquement par le navigateur en réaction aux actions de l'utilisateur·ice, comme un clic de souris, un appui sur une touche du clavier, un chargement de page, etc.

Que nous choisissions de les écouter et d'y réagir ou pas, ces events sont déclenchés par le navigateur.

Comment les écouter

Pour écouter les évenements, on choisit l'élément dont on veut écouter l'activité en utilisant un sélecteur puis en utilisant une méthode appellée addEventListener.

let button = document.querySelector('button');

button.addEventListener("click", (event) => {
    
});

addEventListener prend deux paramètres : le type d'event à écouter et une fonction qui sera appelée lorsque l'event se produit.

Sauf que cette fonction pour nous elle ne rressemble pas vraiment à la syntaxe qu'on connait. Vous avez appris ce qu'on appelle les fonctions nommées : une fonction qui a un nom précis.

On peut tout à fait utiliser des fonctions nommées quand on appelle addEventListener mais ça n'est pas la majorité des cas. Dans la plupart des cas, on utilise des fonctions anonymes, qui sont des fonctions sans nom.

Une fonction anonyme ne peut être utilisée que dans le contexte où elle est déclarée. Elle ne peut pas être réutilisée ailleurs dans le code. Elle est limitée au scope de l'endroit où elle est déclarée. Ici son scope ce sont les parenthèses de addEventListener.

Les types d'events

Il existe de nombreux types d'events, classés par type d'actions ou par type de périphériques :

Chargement de la page

Lorsque tout votre DOM est chargé la fenêtre déclenche un event : DOMContentLoaded, cet event est particulièrement important parce qu'il vous permet de savoir que vous pouvez utiliser votre JavaScript en toute sécurité.

Le reste de vos appels de fonctions, sélection du DOM et écoute d'event devrait toujours se faire dans la fonction anonyme de cet event :

window.addEventListener("DOMContentLoaded", () => {
   // tout monde code js à part les définitions de fonctions 
});

Les events du clavier

Principalement pour le clavier, nous allons surveiller l'appui et le relâchement des touches :

keydown

L'event keydown est déclenché lorsque l'utilisateur appuie sur une touche du clavier.

let section = document.querySelector('section');

section.addEventListener("keydown", (event) => {
   let key = event.key; // pour savoir quelle touche est appuyée 
});

keyup

L'event keyup est déclenché lorsque l'utilisateur relache une touche du clavier.

let section = document.querySelector('section');

section.addEventListener("keyup", (event) => {
   let key = event.key; // pour savoir quelle touche est appuyée 
});

Les events de la souris

click

C'est probablement l'event que vous allez le plus utiliser au départ, il permet de surveiller un clic sur un élément HTML :

let button = document.querySelector('button');

button.addEventListener("click", (event) => {
    let target = event.target; // pour savoir quel élément a été cliqué
});

mousedown

L'event mousedown est déclenché lorsque l'utilisateur·ice appuie sur un bouton de la souris.

let section = document.querySelector('section');

section.addEventListener("mousedown", (event) => {
    let button = event.button; // pour savoir quel bouton de la souris a été appuyé
    let posX = event.clientX; // pour savoir la position de la souris sur l'axe X
    let posY = event.clientY; // pour savoir la position de la souris sur l'axe Y
});

mouseup

L'event mouseup est déclenché lorsque l'utilisateur·ice relâche un bouton de la souris.

let section = document.querySelector('section');

section.addEventListener("mouseup", (event) => {
    let button = event.button; // pour savoir quel bouton de la souris a été appuyé
    let posX = event.clientX; // pour savoir la position de la souris sur l'axe X
    let posY = event.clientY; // pour savoir la position de la souris sur l'axe Y
});

Écouter les events sur plusieurs éléments

Si vous voulez écouter les events sur plusieurs éléments similaires, vous pouvez, mais vous allez devoir utiliser une boucle pour attacher un addEventListener à chaque élément :

let buttons = document.querySelectorAll('button');

for(let button of buttons)
{
    button.addEventListener("click", (event) => {
        let clickedButton = event.target; // pour savoir quel bouton a été cliqué
    });
}

09 January 2026