• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 22/07/2020

Écoutez des événements

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Afin de réagir lors d'un clic sur un bouton par un utilisateur, nous allons devoir écouter les événements.

Qu'est-ce qu'un événement ?

Un événement est une réaction à une action émise par l'utilisateur, comme le clic sur un bouton ou la saisie d'un texte dans un formulaire.

Un événement en JavaScript est représenté par un nom ( click ,  mousemove ...) et une fonction que l'on nomme une  callback . Un événement est par défaut propagé, c'est-à-dire que si nous n'indiquons pas à l'événement que nous le traitons, il sera transmis à l'élément parent, et ainsi de suite jusqu'à l'élément racine.

Cette fonction  callback , c'est nous qui allons la spécifier. Elle sera appelée à chaque fois que l'action que l'on désire suivre est exécutée. Cela signifie que si l'on désire suivre le clic sur un élément, notre fonction sera appelée à chaque fois que l'utilisateur cliquera sur cet élément. 

Réagissez lors d'un clic sur un élément

Afin de réagir lors d'un clic sur un élément, il faut écouter cet événement. Pour cela, nous avons à notre disposition la fonction   addEventListener() . Cette fonction nous permet d'écouter tous types d'événements (pas que le clic).

addEventListener(<event>, <callback>)  (doc) prend en paramètres le nom de l'événement à écouter (voici la liste des événements existants), et la fonction à appeler dès que l'événement est exécuté.

Voyons un exemple avec l'événement "clic sur la souris".

L'événement onclick

Admettons que vous vouliez réagir au clic sur un lien. Vous allez tout d'abord devoir récupérer l'élément qui correspond à votre lien, comme nous l'avons vu précédemment. Ensuite, vous allez appeler la méthode  element.addEventListener('click', onClick);  directement sur cet élément.

onClick  correspond à la fonction que vous allez définir et qui sera appelée à chaque fois que l'utilisateur cliquera sur votre lien. C'est donc vous qui choisissez ce que vous souhaitez faire : récupérer des informations depuis un serveur, afficher un message, etc. Le comportement par défaut de l'élément actionné sera tout de même exécuté. Ainsi, s'il y a un clic sur un lien, vous pouvez, dans votre fonction de callback, faire en sorte d'afficher un message, mais le navigateur va ouvrir le lien. De la même manière, si le clic se fait sur un bouton de validation de formulaire, celui-ci sera envoyé. Il est possible de désactiver ce comportement par défaut, c'est ce que nous allons voir juste après. 😀

Mais avant, voyons un petit exemple :

const elt = document.getElementById('mon-lien'); // On récupère l'élément sur lequel on veut détecter le clic
elt.addEventListener('click', function() { // On écoute l'événement click
elt.innerHTML = "C'est cliqué !"; // On change le contenu de notre élément pour afficher "C'est cliqué !"
});

preventDefault()

Comme vous avez pu le voir si vous avez essayé de réagir aux clics sur votre lien, votre fonction est bien appelée, mais la page change. En effet, il s'agit d'un lien, et dès que l'on clique sur un lien, le navigateur nous redirige sur la page vers laquelle il pointe.

Mais si on ne souhaite pas avoir ce comportement, afin de pouvoir faire autre chose à la place, comme afficher un message, comment faire ?

Il y a quelque chose dont je ne vous ai pas encore parlé. Vous vous rappelez de votre fonction de callback ? Celle qui est appelée lorsque l'utilisateur clique sur le lien ? Eh bien, en fait elle prend un paramètre. Ce dernier correspond au contenu de l'événement qui vient de se produire, et il nous met à disposition quelques fonctions et propriétés intéressantes.

Nous verrons plus en détail comment fonctionne cet objet dans le prochain chapitre, mais sachez déjà qu'il contient une fonction  preventDefault()  qui fait exactement ce que l'on veut !

En appelant cette fonction dans votre callback, vous demandez au gestionnaire des événements de ne pas exécuter le comportement par défaut de votre élément (qui est la redirection vers une autre page pour un lien). Et cela marche aussi pour d'autres types d'éléments que le lien. Cette même fonction exécutée pendant un événement  onsubmit  sur un formulaire empêchera le formulaire de s'envoyer au serveur, par exemple.

Si on reprend notre exemple précédent, voici comment empêcher que notre navigateur ne change de page quand on clique sur le lien :

const elt = document.getElementById('mon-lien'); // On récupère l'élément sur lequel on veut détecter le clic
elt.addEventListener('click', function(event) { // On écoute l'événement click, notre callback prend un paramètre que nous avons appelé event ici
event.preventDefault(); // On utilise la fonction preventDefault de notre objet event pour empêcher le comportement par défaut de cet élément lors du clic de la souris
});

stopPropagation()

De la même manière que  preventDefault() ,  stopPropagation()  est une fonction de l'objet que votre fonction reçoit en paramètre. Son rôle est par contre très différent, car il nous permet d'empêcher la propagation de l'événement vers son parent. En effet, lorsqu'un événement est déclenché, il est d'abord reçu par l'élément cible, mais il est ensuite remonté vers les éléments parents qui sont aussi dans la cible.

Avec  stopPropagation() , vous pouvez ainsi empêcher que d'autres éléments reçoivent l'événement.

Admettons par exemple que nous ayons un élément pour lequel nous voulons afficher un message lorsque l'on clique dessus. Mais à l'intérieur de cet élément, nous avons aussi un autre élément qui doit nous afficher un autre message lorsque l'on clique dessus.

Par défaut, si nous cliquons dans l'élément intérieur, le message va s'afficher, puis notre élément parent va lui aussi recevoir l'événement du clic et encore changer le message. Pour éviter cela, nous devons stopper la propagation de l'événement.

Ainsi, dans l'élément intérieur, nous ferons ceci :

elementInterieur.addEventListener('click', function(event) {
event.stopPropagation();
elementAvecMessage.innerHTML = "Message de l'élément intérieur";
});

De cette manière, lorsque l'on clique sur l'élément intérieur, l'élément parent ne recevra plus le clic, et seul l'élément intérieur affichera son message. Par contre, en cliquant directement dans l'élément parent, sans être dans l'élément intérieur, l'élément parent recevra bien l'événement et affichera bien son message.

Pratiquez !

Voyons maintenant quelques cas d'utilisation pour mettre en pratique ces nouvelles connaissances.

Entraînez-vous sur cet éditeur automatique CodePen en réalisant l'exercice suivant:

Nous souhaitons lancer une bataille de clics ! Nous avons un article qui correspond à notre parent (ID parent), et nous avons un lien (balise a) qui correspond à notre enfant (ID child). Le but est de cliquer soit dans le parent, soit dans l'enfant et d'afficher le nombre de clics dans chaque élément directement dans les éléments #parent-count et #child-count.

  1. Commencez par écouter les événements click depuis l'élément #parent. Puis affichez le nombre de clics dans l'élément #parent-count.

  2. Faites la même chose mais avec l'élément #child. Il faudra afficher le nombre de clics sur cet élément dans l'élément #child-count. Maintenant, dès que vous cliquez sur le parent ou l'enfant les compteurs se mettent à jour. Mais vous avez sans doute remarqué que lorsque vous cliquez sur l'enfant, le compteur du parent se met aussi à jour ?

  3. Maintenant, faites de sorte à ce que lorsque vous cliquez sur l'enfant, seul le compteur de l'enfant se mette à jour. N'oubliez pas que l'élément enfant se trouve à l'intérieur de l'élément parent. Ca ne se voit pas ici car nous sommes dans un environnement protégé, mais en réalité, #child est un lien. Et en sa qualité de lien, lorsque l'on clique dessus, le navigateur doit changer de page.

  4. Evitez qu'un clic sur le lien ne vous fasse changer de page: supprimez ce comportement par défaut.

En résumé

Dans ce chapitre, nous avons appris :

  • Ce qu'est un événement ;

  • À écouter un événement ;

  • À annuler le comportement par défaut d'un événement ;

  • À stopper la propagation d'un événement.

Nous venons de voir comment gérer les événements simples, c'est-à-dire ceux qui n'ont pas de données (comme un clic). Mais vous devez vous demander comment gérer des événements plus complexes, comme  un événement de mouvement de souris pour lequel on a besoin de connaître sa position sur la page.

C'est ce que nous allons voir dans le prochain chapitre !

Exemple de certificat de réussite
Exemple de certificat de réussite