Gestion des évènements en Javascript — Jean-Marc Lecarpentier

Les 3 couches du Web

Séparer :

structure de la page : HTML
Mise en forme de la page : CSS
Interactions et comportement : Javascript

Capter des évènements

Évènements se produisent sur des éléments de la page : clic, survol de la souris, etc
Dire aux éléments « d'écouter » si un évènement se produit : event listener
Lorsque l'évènement est capté, il faut savoir quoi exécuter
Notion de programmation évènementielle

addEventListener et fonction callback

DOM fournit une fonction : addEventListener
elt.addEventListener('click', maFonction) (avec elt qui est un objet de type Élément)
Deux arguments :
1. le type d'évènement à capter : clic, etc (voir plus loin)
2. le nom de la fonction callback : fonction à exécuter

addEventListener et fonction callback

Ce qui se passe par exemple pour un clic sur un élément :
1. L'utilisateur clique sur l'élément
2. Le clic génère un objet Event
3. Si l'élément possède un listener de clic alors celui-ci se charge d'appeler la fonction callback dont le nom a été donné au listener et lui donne l'objet Event en paramètre
4. La fonction callback est exécutée

Fonction callback

Une fonction en Javascript est aussi un objet, on peut donc « mentionner » son nom comme une variable
elt.addEventListener('click', maFonction) : on donne en argument le nom de la fonction qui devra être exécutée. Ceci fait référence à l'objet fonction correspondant. Attention la fonction n'est pas exécutée à ce moment, donc pas de parenthèses !
La fonction callback sera exécutée lors du captage d'un événement. Lors de cette exécution, elle reçoit en argument l'objet évènement qui a été capté.

    let maDiv = document.getElementById('div1');
    maDiv.addEventListener('click', clicSurElement);

    function clicSurElement(event) {
        console.log("Un clic est capté");
        console.log(event);
    }

Démo

Séparation structure-forme-interactions

Faire un script pour initialiser les évènements captés sur la page
Attention : placer le script en fin de body pour que l'arbre DOM soit bien construit

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Capteur d'évènement</title>
    <body>
        <h1>Capteurs d'évènement</h1>
        
        <p id="p1">Attention : mettre le JS à la fin  du HTML afin que l'arbre DOM soit bien créé !</p>
        
        <script>
            "use strict";
            document.getElementById('p1').addEventListener('click', clicSurElement);
        </script>
    </body>
</html>

Types d'évènements

Événements souris : mouseenter, mouseleave, click, mousedown, etc...
Événements clavier : keyup, keydown, keypress (obsolète)
Évenements globaux : load, unload, resize, scroll, etc...
Événements liés aux formulaires : focus, change, blur, submit

Liste complète

Objet évènement

Objet Event dans le DOM
Propriétés de base :
- currentTarget : le noeud du DOM qui a déclenché le callback
- target : le noeud du DOM qui a reçu l'évènement en premier
Besoin de savoir quel élément a déclenché le callback

Exemple

Objet évènement

Plus des propriétés qui dépendent du type d'évènement :
- Évènement souris : screenX, screenY, clientX, clientY, etc liste complète
- Évènement clavier : key, code, ctrlKey, altKey, etc liste complète
  Attention pas mal d'incompatibilités selon les navigateurs

Démo

Intervenir sur l'évènement

event.preventDefault() : empêcher l'action par défaut de se produire (par ex. activation d'un lien)
event.stopPropagation() : arrêter la propagation de l'évènement dans les couches HTML
elt.removeEventListener('click', clicSurElement) pour supprimer un capteur d'évènement sur un élément. Les paramètres doivent être les mêmes que ceux qui ont servi à créer le capteur.

Démo

En résumé

Javascript pilote les interactions
Initialiser les évènements sur la page après son chargement
Gestion des évènements : ajout, suppression, propagation
Actions gérées par des fonctions callback
Possibilités quasi infinies