Gestion des évènements en Javascript

Jean-Marc Lecarpentier
Université de Caen

Les 3 couches du Web

Séparer :
  • structure de la page : HTML
  • Mise en forme de la page : CSS
  • Interactions et comportement : Javascript
Les 3 couches du web

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>
    </head>
    <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>
            

Structure d'application

  • Inclure les appels aux scripts externes dans l'en-tête
        <head>
            <meta charset="UTF-8">
            <title>Capteur d'évènement</title>
            <script src="lib/adress-book.js"></script>
            <script src="lib/person.js"></script>
            <script src="app/init.js"></script>
        </head>    
  • Créer une fonction qui initialise les interactions de la page
            "use strict";
            
            function initApp() {
                // mettre toutes les interactions à initialiser
                // par ex
                let toto = document.getElementById("toto"); 
                toto.addEventListener("click", displayAddressBook);
                ...
            }    
  • Appeler la fonction d'initialisation en fin de body
        <body>
            ...
            <script>
            "use strict";
            // appel de la fonction d'initialisation
            initApp();
            </script>
        </body>    

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
Couches HTMl et évènements
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