Les évènements en Javascript

La notion d'évènement

Le Javascript offre des fonctionnalités permettant de rendre des pages web interactives. Jusqu'ici, nos programmes étaient exécutés séquentiellement, ligne de code par ligne de code. Pendant cette séance, nous allons voir que la page peut réagir aux actions de l'utilisateur sur les éléments du DOM. Les scripts seront alors exécutés en fonction de son comportement : le mouvement de la souris, un clic sur un bouton etc. L'exécution du script dépendra alors de ces actions, des évènements se produisant sur la page : c'est la programmation évènementielle.

Les évènements permettent de déclencher l'exécution d'une fonction quand une action est effectuée sur la page (afficher un message lors d'un clic sur un bouton par exemple). Voici une liste non exhaustive de quelques évènements courants : mouseover, click, keypress, mouseleave... Vous pouvez trouver la liste complète dans la doc.

Ajouter un évènement au travers du DOM

Nous allons voir comment utiliser les évènements à travers de l'interface standard DOM-2. Il existe d'autres techniques pour implémenter des évènements : dans les balises HTML sans passer par le DOM, on évitera ceci afin de séparer HTML et Javascript et l'interface DOM-0, plus ancienne et plus limitée.

Pour implémenter un évènement, on utilise la méthode addEventListener qui va ajouter un écouteur d'évènements sur un élément HTML se chargeant de surveiller les actions de l'utilisateur sur cet élément. Elle prend trois paramètres :

• Le nom de l'évènement : "click", "mouseover"...
• La fonction à exécuter
• Optionnel : Un booléen pour spécifier le type de phase, capture ou bouillonnement

...

Place aux exemples

Déclencher un évènement à la fin du chargement de la page

On utilise l'évènement load sur la fenêtre du navigateur window au tout début de son code javascript.

Déclencher un évènement à l'appui d'une touche

Dans cet exemple, une alerte affiche le message "Vous avez appuyé sur une touche" quand l'utilisateur appuie sur une touche dans le champ input.

Déclencher un évènement au survol de la souris

Ici, le message "Vous avez survolé l'image" s'affiche quand l'utilisateur survole l'image.

Utiliser une fonction anonyme

Plutôt que donner le nom d'une fonction en paramètre à la méthode addEventListener, on peut utiliser une fonction anonyme (une fonction qui n'a pas de nom !). La fonction est déclarée directement dans le deuxième paramètre de la méthode addEventListener. L'exemple précédent de l'évènement au survol de la souris peut aussi s'écrire comme ceci avec une fonction anonyme. Le résultat sera identique.

L'objet Event

L'objet Event est créé quand un évènement a été déclenché. Il permet d'obtenir de nombreuses informations : l'élément à l'origine de l'évènement, la touche pressée, les coordonnées du pointeur...

Cet objet est fourni à la fonction qui gère l'événement sous la forme d'un paramètre qu'on nommera ici e.

...