Les méthodes click() et dblclick()
La méthode click() va nous permettre de gérer les événements de type click, c’est-à-dire d’exécuter un certain code suite à un clic de souris d’un utilisateur sur un élément.
La méthode dblclick() va elle nous permettre de gérer un événement doubleclick, c’est-à-dire un double clic sur un élément.
On va ainsi par exemple pouvoir afficher / cacher un texte lorsqu’un utilisateur clique sur un élément ou changer la couleur de fond lors d’un double clic.
See the Pen
Cours jQuery 3.2.1 by Pierre (@pierregiraud)
on CodePen.
Les méthodes mouseenter(), mouseleave() et hover()
La méthode mouseenter() permet d’ajouter un gestionnaire d’événements à un élément pour l’événement “la souris entre dans un élément”. On préfère généralement son utilisation à la méthode mouseover() qui va permettre de répondre à un événement similaire mais dont le comportement est beaucoup moins facilement prévisible.
La méthode mouseleave() permet d’enregistrer un gestionnaire d’événements pour l’événement “la souris sors d’un élément”. Là encore, on préférera généralement son utilisation à la méthode mouseout() qui permet de répondre à un événement similaire mais dont le comportement est plus difficilement prévisible.
See the Pen
Cours jQuery 3.2.2 by Pierre (@pierregiraud)
on CodePen.
La méthode hover() permet elle d’ajouter plusieurs fonctions gestionnaires d’événements qui vont s’exécuter à la suite lorsque la souris va rentrer et sortir de l’élément.
La méthode hover() va donc être un raccourci pour nous permettre de gérer les deux événements mouseenter et mouseleave d’un coup.
Pour être tout à fait précis, le premier gestionnaire passé comme premier argument à hover() s’exécutera lors du déclenchement de l’événement mouseenter tandis que le deuxième gestionnaire passé comme second argument s’exécutera lors du déclenchement de l’événement mouseleave.
See the Pen
Cours jQuery 3.2.3 by Pierre (@pierregiraud)
on CodePen.
Les méthodes mousedown() et mouseup
Les méthodes jQuery mousedown() et mouseup() vont respectivement nous permettre de gérer les évènements « le bouton de la souris est pressé sur un élément » et « le bouton de la souris relâché ».
Réécrivons notre exemple précédent en utilisant plutôt ces deux méthodes :
See the Pen
Cours jQuery 3.2.4 by Pierre (@pierregiraud)
on CodePen.
La méthode mousemove()
La méthode mousemove() va nous permettre d’enregistrer un gestionnaire d’événements pour l’événement “la souris bouge”. Cette méthode va donc nous permettre d’obtenir les coordonnées de la souris en temps réel à partir d’un point de départ. Cela va pouvoir s’avérer très intéressant pour permettre aux utilisateurs de dessiner ou pour toutes sortes de jeux développés en JavaScript.
Pour comprendre l’exemple qui va suivre, vous devez avant tout savoir que lorsqu’on enregistre un gestionnaire d’événements, un objet event lui est passé. L’objet event possède de nombreuses propriétés et certaines vont particulièrement nous intéresser ici : les propriétés pageX et pageY qui nous fournissent la position de la souris par rapport au coin gauche et supérieur du document.
See the Pen
Cours jQuery 3.2.5 by Pierre (@pierregiraud)
on CodePen.
Dans cet exemple, on commence par passer un objet event en argument de notre fonction gestionnaire d’événements afin de pouvoir utiliser ses propriétés pageX et pageY.
Dès que la souris bouge (en restant dans l’élément body), l’événement mousemove se déclenche et les coordonnées du pointeur de la souris sont récupérées et affichées dans notre élément span.
Attention ici : l’événement mousemove est déclenché à chaque mouvement de la souris. Cela fait que des milliers d’événements mousemove peuvent être déclenchés en quelques secondes. Si le gestionnaire d’événement doit effectuer des calculs relativement complexes, cela peut heurter la performance de votre site puisque ces calculs vont potentiellement devoir être effectués des milliers de fois en quelques secondes, ce qui va consommer de nombreuses ressources.
