• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/1/20

Récupérez des données utilisateur avec les événements

Log in or subscribe for free to enjoy all this course has to offer!

Nous savons écouter un événement, mais on ne sait pas encore comment récupérer la position de la souris, ni même le texte saisi dans un formulaire. C'est ce que nous allons voir maintenant avec les données liées aux événements.

Comprenez ce que sont les données liées à un événement

Comme nous l'avons vu brièvement dans le chapitre précédent, lorsque l'on reçoit un événement, notre fonction callback reçoit un paramètre contenant des informations sur cet événement.

Ces informations sont reçues sous la forme d'un objet qui dépendra du type d'événement reçu.

De plus, chaque événement implémente l'objet  Event . C'est-à-dire que chaque événement a au minimum les mêmes fonctions et propriétés que l'objet  Event .

Cela comprend entre autres :

  • preventDefault()  : empêche l'exécution du comportement par défaut de l'élément quand il reçoit l'événement ;

  • stopPropagation()  : empêche la propagation de l'événement vers d'autres éléments ;

  • D'autres propriétés en fonction du type d'événement.

Mais cela ne nous dit toujours pas comment on peut récupérer la position de la souris quand elle bouge !

Détectez le mouvement de la souris

Afin de détecter le mouvement de la souris, il nous faut écouter l'événement  mousemove  (doc).  Cet événement nous fournit un objet de type  MouseEvent . C'est-à-dire que dès que la souris bouge, notre fonction callback sera appelée avec un paramètre de type  MouseEvent , qui contient les données sur le mouvement de la souris.

Voici, entre autres, ce que cet objet nous permet de récupérer :

  • clientX  /  clientY  : position de la souris dans les coordonnées locales (contenu du DOM) ;

  • offsetX  /  offsetY  : position de la souris par rapport à l'élément sur lequel on écoute l'événement ;

  • pageX  /  pageY  : position de la souris par rapport au document entier ;

  • screenX  /  screenY  : position de la souris par rapport à la fenêtre du navigateur ;

  • movementX  /  movementY  : position de la souris par rapport à la position de la souris lors du dernier événement  mousemove

Voici un exemple illustrant tout ça :

elt.addEventListener('mousemove', function(event) {
    const x = event.offsetX; // Coordonnée X de la souris dans l'élément
    const y = event.offsetY; // Coordonnée Y de la souris dans l'élément
});

Lisez le contenu d'un champ texte

Je pense que vous commencez à comprendre comment récupérer les données d'un événement, alors voyons un dernier exemple : la lecture du contenu d'un champ texte lorsque l'utilisateur le modifie.

Prenons quelques minutes pour revoir la liste des événements et essayons de trouver quels événements pourraient correspondre à ce que l'on souhaite faire, c'est-à-dire détecter les changement dans notre champ texte.  

Après une brève recherche, on peut voir qu'il existe un événement  change . Si on regarde sa documentation, on peut voir que c'est un événement qui fonctionne avec les éléments de type  <input> ,  <select>  et  <textarea> . Cet événement est déclenché lorsque le champ perd le focus, c'est-à-dire lorsque l'utilisateur passe à autre chose en cliquant ailleurs et qu'il a fini sa saisie pour ce champ. Cet événement fonctionne aussi pour les cases à cocher (  checkbox  ) et les cases à choix unique (  radio  ).

La documentation de l'événement change qui nous indique comment l'utiliser.
La documentation de l'événement 'change'

C'est donc un événement qui semble parfait pour notre cas, car il nous permet exactement de détecter que le texte saisi dans le champ a changé.

Et  comme la documentation est bien faite, nous disposons d'exemples d'utilisation !

La documentation nous montre quelques exemples d'utilisation de l'événement
Exemple d'utilisation de onchange

Ainsi, on apprend que pour récupérer la valeur de notre champ une fois qu'il a été modifié, il suffit d'accéder à la valeur de l'élément cible :  event.target.value . En effet, ici  target  correspond à l'élément sur lequel s'est produit l'événement, c'est-à-dire un champ de type  <input>  dans notre cas. Or, ce type d'élément contient une propriété  value  qui permet de récupérer ou définir la valeur du champ. C'est aussi simple que ça !

change  c'est bien, mais si je veux pouvoir avoir la valeur dès que l'utilisateur ajoute ou supprime une lettre, comment je fais ?

Pour gérer ce cas, il existe aussi l'événement  input  (doc), qui fonctionne comme  change , sauf qu'il est déclenché dès que le contenu du champ est modifié, même si l'utilisateur n'a pas encore fini de saisir ce qu'il souhaite.

input.addEventListener('input', function(event) {
    output.innerHTML = event.target.value; 
});

Pratiquez !

Essayons maintenant de gérer un formulaire au travers de quelques exercices. Rendez-vous sur cet éditeur CodePen pour réaliser l'exercice suivant:

Nous avons ici un formulaire et nous aimerions restituer les réponses de notre formulaire dans l'élément du dessous. De plus, nous voudrions afficher la position de la souris quand elle se trouve dans cet élément.

  1. Ecoutez les événements input sur l'élément #name afin de savoir quand le contenu du champ texte est changé. Affichez le contenu actuel dans l'élément #res-name

  2. Maintenant nous voulons écouter l'événement du changement de choix du genre (#gender), et afficher le résultat dans l'élément #res-gender.

  3.  Nous souhaitons maintenant afficher les coordonnées de la souris à l'intérieur de l'élément #result dès que celle-ci passe par dessus. Ce que nous voulons, c'est avoir les coordonnées relatives au coin en haut à gauche de l'élément #result.

En résumé

Dans ce chapitre, vous avez appris :

  • De quoi était composé un événement ;

  • À utiliser les données de l'événement pour récupérer la position de la souris ;

  • À utiliser les données de l'événement pour récupérer le texte d'un champ.

Nous venons de voir comment gérer des événements plus complexes qui contiennent des données. Vous savez maintenant tout ce qu'il faut pour manipuler le DOM et interagir avec vos utilisateurs.

Comme nous l'avons fait durant ce chapitre, je ne peux que vous conseiller d'aller voir la documentation lorsque vous avez un doute. Elle peut vous être d'une très grande aide pour trouver ce que vous recherchez. Sinon, une simple recherche sur votre moteur de recherche favori suffit dans 99 % des cas. ;)

Il est maintenant temps d'aller plus loin en apprenant à communiquer avec un serveur pour y lire ou y stocker des données (et pourquoi pas les données que vous avez récupérées de vos utilisateurs !).

Example of certificate of achievement
Example of certificate of achievement