Gestion des évènements

Les évènements permettent d'exécuter des actions en réponse aux interactions des utilisateurs avec une page web, comme l'appui sur une touche ou le déplacement de la souris. JavaScript utilise des écouteurs d’évènements pour détecter ces interactions et déclencher des fonctions en conséquence.

Introduction aux écouteurs d'évènements

Les écouteurs d'évènements (Event Listeners) sont des fonctions attachées à un élément HTML qui se déclenchent lorsqu'un évènement spécifique se produit.

Ajout d’un écouteur d'évènements

Méthode recommandée :

element.addEventListener("event", function);

Exemple :

// Ajoute un écouteur pour le clic sur un bouton
let bouton = document.getElementById("monBouton");
bouton.addEventListener("click", function() {
    alert("Bouton cliqué !");
});

évènements liés aux touches du clavier

Pour écouter un appui sur une touche ou une combinaison de touches, on utilise souvent les évènements keydown, keyup, ou keypress.

• keydown : déclenché lorsqu'une touche est enfoncée.
• keyup : déclenché lorsqu'une touche est relâchée.
• keypress (déconseillé) : déclenché lors de la pression d’une touche mais est moins précis que keydown.

Exemple : détection d'une touche spécifique

document.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        console.log("Touche Entrée appuyée");
    }
});

Exemple : détection d'une combinaison de touches

On peut détecter une combinaison de touches comme Ctrl+C ou Shift+A en vérifiant les propriétés event.ctrlKey, event.shiftKey et event.altKey.

document.addEventListener("keydown", function(event) {
    if (event.ctrlKey && event.key === "c") {
        console.log("Ctrl + C appuyé");
    }
});

Propriétés des évènements au clavier

• event.key : renvoie la touche pressée (ex. : "a", "Enter").
• event.code : renvoie le code physique de la touche (ex. : "KeyA", "Enter").
• event.ctrlKey, event.shiftKey, event.altKey : renvoient true si les touches Ctrl, Shift, ou Alt sont pressées.

évènements liés au curseur de la souris

Les évènements de la souris permettent de réagir aux mouvements, clics, et autres interactions avec le curseur.

Principaux évènements de la souris

• click : déclenché lorsqu'un élément est cliqué.
• dblclick : déclenché lors d'un double-clic.
• mousemove : déclenché lorsqu'on déplace la souris.
• mouseenter et mouseleave : déclenchés lorsque la souris entre ou quitte un élément.
• mousedown et mouseup : déclenchés lors de l'enfoncement et du relâchement d'un bouton de la souris.

Exemple : déplacements de la souris

Cet exemple affiche la position de la souris dans la console à chaque mouvement.

document.addEventListener("mousemove", function(event) {
    console.log("Position de la souris : X = " + event.clientX + ", Y = " + event.clientY);
});

Exemple : clic droit (bouton droit de la souris)

On peut détecter un clic droit avec event.button (0 pour le bouton gauche, 1 pour le bouton du milieu, 2 pour le bouton droit).

document.addEventListener("mousedown", function(event) {
    if (event.button === 2) {  // Bouton droit
        console.log("Clic droit détecté");
    }
});

Propriétés des évènements de souris

• event.clientX et event.clientY : position du curseur par rapport à la fenêtre.
• event.screenX et event.screenY : position du curseur par rapport à l'écran.
• event.button : identifiant du bouton de la souris (0 : gauche, 1 : milieu, 2 : droit).

Supprimer un écouteur d'évènement

Pour supprimer un écouteur d’évènement, il faut référencer la fonction à retirer lors de l’appel de removeEventListener.

Exemple :

function afficheAlerte() {
    alert("Alerte !");
}

let bouton = document.getElementById("monBouton");
bouton.addEventListener("click", afficheAlerte);

// Supprimer l'écouteur d'évènement
bouton.removeEventListener("click", afficheAlerte);

Exemples d’applications

1. Formulaire validé par Entrée : Exécuter une validation de formulaire en appuyant sur Enter.
2. Zoom avec la Molette de la Souris : Modifier la taille d'une image ou d'un texte avec wheel.
3. Dessin avec la Souris : Créer un canevas où l'utilisateur peut dessiner en cliquant et déplaçant la souris.

Conclusion

Les écouteurs d'évènements permettent de capturer les interactions utilisateur et de rendre les pages web dynamiques. En combinant différents types d'évènements (clavier, souris), on peut créer une expérience utilisateur riche et interactive.