Dans cette partie on va voir une autre manière de déclarer ses fonctions en Javascript qui consiste à créer celles-ci à la volée.
Même si j'ai préféré traiter ce sujet dans la partie DOM, sachez qu'on peut utiliser les fonctions anonymes partout en Javascript, même sans utiliser l'interface DOM.
Dans la plupart des cas, on a besoin de déclarer des fonctions anonymes sur des objets (nœuds) nouvellement intégrés au DOM.
D'une manière générale une fonction anonyme est déclarée comme ceci:
objet.onévénement = function() { corps de la fonction }
Dans ce cas, si l'événement déclaré comme attribut sur l'objet est détecté sur celui-ci, le code (corps de la fonction) sera exécuté.
Essayons d'améliorer le premier exemple de la page précédente où on crée des DIV dynamiquement. L'objectif est d'afficher un message dans la boite alert() une fois une des DIVs créées est survolée.
L'attribut qui représente l'événement (onmouseover par exemple) doit être en minuscule.
Gestionnaire d'événements dynamique
Méthode addEventListener()
Si les fonctions anonymes permettent de créer des fonction à la volée sur n’importe quel objet Javascript, la méthode addEventListener() quant à elle, permet de d'ajouter dynamiquement un gestionnaire d'événement en s'appuyant sur les spécifications du DOM.
La syntaxe du gestionnaire d'événements dynamique est:
Le nom de l'événement définit l'événement à prendre en compte par le gestionnaire. Par exemple: click, mouseover, mousemove... (Pas de préfixe on).
Fonction à exécuter représente le nom de la fonction à appeler (sans parenthèses) ou une fonction anonyme à travers laquelle on exécute le code directement sans définir une fonction au préalable .
La valeur booléenne peut être true ou false. Chacune des deux valeurs représente un mode de propagation des événements en Javascript. En effet, il existe deux modes: Capture représenté par true et bouillonnement représenté par false. Nous aurons l'occasion de voir la propagation des événements dans la partie suivante.
Avec le gestionnaire d'événements dynamique, l'exemple précédent devient:
Au lieux d'appeler la fonction afficherMessage qui est censée afficher le message. On aurait pu déclarer le code à exécuter directement à travers une fonction anonyme.
Méthode removeEventListener()
La méthode removeEventListener() permet de retirer un gestionnaire d’événement dynamique créé par la méthode addEventListener().
La syntaxe de la suppression d'un gestionnaire d'événements dynamique est: