Ajouter un évènements
Évènement
Un évènement en Javascript est une action qui se produit sur une page web, comme un clic de souris, une pression de touche du clavier, la soumission d'un formulaire, la redimension de la fenêtre, le défilement de la page, le démarrage d'une vidéo, le survol d'un élément, le démarrage d'une animation, etc. Comme vous pouvez le constater, il y a une multitude d'évènements qui peuvent se produire sur une page web. Il est même possible de créer ses propres évènements personnalisés.
Pour nous, les programmeurs, les évènements sont importants, car ils nous permettent de réagir à ces actions de l'utilisateur. Par exemple, si l'utilisateur clique sur un bouton, nous pouvons réagir à ce clic en exécutant une fonction qui change le contenu de la page ou qui envoie des données dans une base de données. C'est ce qui rend les pages web interactives. Pour y arriver, nous utiliserons le concept de "listener", qui nous permettra de programmer des fonctions qui réagissent à des évènements spécifiques.
Réagir à un évènement
Pour réagir à un évènement, nous utiliserons la fonction addEventListener. Cette fonction programme une autre fonction qui sera exécutée lorsqu'un évènement spécifique se produira. La syntaxe de cette fonction est la suivante:
Voici les points importants à retenir:
- element
- C'est l'élément HTML sur lequel nous voulons écouter l'évènement. Cet élément doit être préalablement trouvé dans le DOM avant de pouvoir lui ajouter un "listener".
- nom-evenement
- C'est une chaîne de caractères contenant le nom de l'évènement. Cette chaîne est généralement en minuscule et doit respecter exactement le nom de l'évènement voulu. Dans ce cours, nous utiliserons majoritairement les évènements click, input, submit et keydown. Il en existe toutefois beaucoup plus.
- callback
- C'est la fonction qui sera exécutée lorsque l'évènement se produira. Nous passerons ici la fonction comme une variable. Nous ne mettrons donc pas de parenthèses après le nom de la fonction puisque le but n'est pas de l'exécuter immédiatement, mais de la programmer pour qu'elle s'exécute plus tard. Il est aussi possible de passer une fonction anonyme directement au lieu de passer une variable.
Réagir au clic
Le clic de souris est l'un des évènements les plus courants sur une page web. Il est utilisé pour tout, des boutons aux liens en passant par les images et les éléments de formulaire. Pour réagir à un clic, nous devons ajouter un "listener" sur l'élément HTML que nous voulons écouter. Voici un exemple:
Réagir à la soumission d'un formulaire
Un autre évènement très courant est la soumission d'un formulaire. Lorsqu'un utilisateur appuie sur le bouton d'envoi d'un formulaire, un évènement de soumission est déclenché. Pour réagir à cet évènement, vous pouvez ajouter un code similaire à celui-ci:
Réagir aux touches du clavier
Il est aussi possible de réagir aux touches du clavier. Si nous voulons réagir aux touches lorsque l'utilisateur est en train de taper dans un champ de texte, nous pouvons ajouter un "listener" sur l'évènement input. Voici un exemple:
Si nous voulons plutôt réagir à une touche spécifique dans l'ensemble de la page, nous pouvons ajouter un "listener" sur l'évènement keydown. Puisque nous voulons y réagir partout dans la page, nous l'ajouterons à l'objet document lui-même.
Objet event
Dans l'exemple précédent, vous noterez que la fonction toucheAppuyee prend un paramètre event. Ce paramètre est en fait un objet qui contient des informations sur l'évènement qui s'est produit, comme la touche qui a été appuyée dans ce cet exemple. Tous les évènements Javascript passent un objet event à la fonction qui les écoute. C'est au programmeur de décidé s'il veut utiliser cet objet ou non. Dans cet objet, vous trouverez entres autres les éléments suivants:
- event.currentTarget: L'élément HTML sur lequel l'évènement est programmé.
- event.key: La touche qui a été appuyée si l'évènement est de type keydown ou tout autre évènement du clavier.
- event.preventDefault(): Une fonction qui permet d'annuler le comportement par défaut de l'évènement dans le navigateur. Très utile pour empêcher un formulaire de rafraîchir la page ou un lien de rediriger l'utilisateur.
Pour plus d'information sur cet objet, vous pouvez consulter la ressource ci-dessous:
Autres évènements
Il existe une multitude d'autres évènements que vous pouvez écouter sur une page web. si vous voulez en savoir plus sur les évènements disponibles, vous pouvez consulter la ressource ci-dessous: