Les événements en jQuery

Vous connaissez bien sûr les événements clic, survol, double clic, etc..
Mais il y a d'autres événements moins connus existants en JS traditionnel et repris en jQuery.
Il y a aussi des événements spécifiques à Jquery.

Evénements de la souris

Evénementsens
click()Clic gauche
dbclick()Double-clic
mousedown()Appui sur le bouton gauche ou droit de la souris alors que le pointeur est au-dessus de l'élément
mouseover()Début de survol de l'élément
mouseout()Arrêt de survol de l'élément
mousemove()Déplacement du pointeur au-dessus de l'élément
mouseup()Relâchement du bouton gauche ou droit alors que le pointeur est au-dessus de l'élément
scroll()Utilisation de la roulette alors que le pointeur se trouve au-dessus d'un élément concerné par ce type d'événement

Exemple 1

Le code CSS & HTML de l'exemple

... <style> img {opacity : 0.1; width :20%} div {height : 100px ; width : 100% ; overflow : hidden ; background : pink ; padding : 5px ;} ... <body> <img src ="../images/bikini.jpg" /> <div> Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ... </div> <img src ="../images/trikini.jpg" /> <p>Survolez une image pour la rendre parfaitement opaque et l'agrandir. <p>Survolez la boîte rose pour ajouter des barres de défilement <br>Utilisez ensuite la roulette, la hauteur de la boîte s'ajuste alors au contenu ! ...

Deux images de petite taille et quasi transparentes ; une boîte rose dont une grande partie du contenu est masqué (overflow : hidden).

Le script

$("img").mouseover(function() {$(this).css("opacity","1").width("40%") ; }); $("img").mouseout(function() {$(this).width("20%").css("opacity","0.1"); }); $('div').mouseenter(function() {$(this).css("overflow", "scroll") ; }); $('div').scroll(function() {$(this).css("height","auto") ; }); $('div').mouseleave(function() {$(this).css("overflow","hidden").css("height","") ; });

Si survol d'une image elle devient opaque et est agrandie.
Si survol de la boîte (mouseenter équivaut à mouseover) ajout de barres de défilement (overflow :scroll).
Si emploi de la roulette de la souris alors que la boîte rose est survolée la hauteur de cette dernière est ajustée à son contenu.
J'ai aussi utilisé mouseleave à la place de mouseout. Affichez la page correspondant à l'exemple !

Exemple 2

Affichage en permanence de la position du pointeur.

Le code de l'exemple

... <body> <span></span> <script> $(window).mousemove(function(event){ $("span").text("position du curseur : " + event.pageX + ", " + event.pageY); }); ...

Utilisation de l'événement mousemove.

Les propriétés pageX et pageY retournent les coordonnées X et Y du pointeur dans la page. Affichez la page correspondant à l'exemple !

Les événements de clavier

Evénementsens
keydown()Appui sur une touche du clavier
keyup()Relâchement d'une touche du clavier préalablement enfoncée
keypress()Maintien d'une touche du clavier enfoncée

Premier exemple

Le code de la page :

... <style> img {opacity : 0.1; width : 20%} ... <body> <p class ="remarque">Appuyez sur une touche du clavier pour rendre opaque et agrandir les images. <img src ="../images/bikini.jpg"/> <img src ="../images/trikini.jpg" /> <script> $(window).keydown(function() {$("img").css("opacity","1").width("40%") ; }); $(window).keyup(function() {$("img").css("opacity","").width("20%") ; }); ...

Dans le cadre d'un "site adaptatif" les largeurs des images sont exprimées en %!

Utilisation de deux événements de clavier: keydown, keyup.
Testez le code ci-dessus !

Exemple 2

Comme en Javascript traditionnel il est souvent utile de récupérer le code ASCII de la touche enfoncée ainsi que le type d'événement.

Le code de la page :

... <style> input, label {display : inline-block ; width : 40% ; height : 20px ; } ... <body> <form> <label>Saisir une lettre majuscule ou minuscule</label><input type ="text" /> <br><label>Code ASCI du dernier caractère saisi : </label><input type = "text" readonly> <br><label>Type événement : </label><input type = "text" readonly> </form> <script> $("input:eq(0)").keypress(function(event) {$('input:eq(1)').val(event.which);$('input:eq(2)').val(event.type)}); ...

Si par exemple je saisis A dans le premier champ, le deuxième affiche 65 (code ASCII de la lettre A) et le troisième affiche "keypress".
Il suffit d'associer à l'objet event la propriété which et la propriété type.
Testez le code ci-dessus !

Exemple 3

Nous allons programmer le déplacement d'un boule via les quatres touches de déplacement du clavier.

Le code CSS et HTML de la page :

... <style> #billard {position : relative ; width : 100%; height :200px ; margin : 10px auto 10px auto ; background : lime ; } #boule {width : 20px ; height : 20px ; border-radius : 10px ; box-shadow : 5px 5px 5px gray ; position : absolute ; top : 90px ; left : 50% ; background : red ; } ... <body> <div id = "billard"> <div id ="boule"></div> </div> ...

Dans le cadre du "responsive web design" La largeur du billard est exprimée en % !

La boule est dessinée via le CSS : une boîte carrée avec des angles arrondis et un ombrage pour donner un effet 3D.

Le script :

// variables globales var x; var y ; // programmation des touches de direction $(window).keydown(function(e) { if(e.which ==37) gauche(); if(e.which ==39) droite(); if(e.which ==38) haut(); if(e.which ==40) bas(); }); // quatre fonctions de déplacement function gauche() {x =$("#boule").offset().left ; x= x-20; nouveau();} function droite() {x =$("#boule").offset().left ; x= x+20; nouveau();} function haut() {y =$("#boule").offset().top ; y= y-20; nouveau();} function bas() {y =$("#boule").offset().top ; y= y+20; nouveau();} // nouvelle position boule dans l'écran function nouveau() {$("#boule").offset({left: x , top : y}); }

La propriété jQuery which appliquée à l'objet "event" (ici désigné par la lettre e) retourne le code ASCII de la touche enfoncée.

Emploi de la méthode Jquery offset() : position d'un élément dans l'écran.
Cette méthode est "getters" mais aussi "setters" !

Si vous comprennez mal la méthode offset de jQuery revoyez le chapitre "jQuery : taille et position d'un élément" dans le même tuto.
Testez cet exemple !

La boule peut sortir du billard. Il ne serait pas très compliqué de résoudre ce problème. Il suffirait d'ajouter un test dans chacune des quatre fonctions de déplacement.

Des événements de formulaire

Exemple

Lorsque le premier input a le focus il est affiché dans le champ un message rappelant qu'une adresse mail contient obligatoirement le caractère arobase.
Lorsque le premier input perd le focus son contenu est transféré dans le deuxième input (qui est en lecture seule).

Le code de l'exemple

... <form> <label>Saisir votre adresse mail</label><input type ="email" /> <label>adresse mail saisie par vos soins</label><input type = "text" readonly> </form> <script> $("input:eq(0)").focus(function() {$(this).val("n'oubliez pas de saisir l'arobase"); }); $("input:eq(0)").blur(function() {var saisie = $(this).val(); $("input:eq(1)").val(saisie); }); ...

Attention l'événement blur() porte sur le premier input donc this désigne ce premier input.
Sinon le code jQuery ne pose aucune difficulté.

Faut-il rappeler que pour récupérer/modifier le contenu d'une zone de saisie il faut utiliser la méthode val() (et non pas les méthodes text() ou html()).
Testez le code ci-dessus !

Pour les formulaires il y a aussi les événements submit() pour soumissionner les données saisies dans un formulaire ainsi que l'événement change() : changement de valeur dans une liste.

Evénements propres à jQuery

Evénement hover

Cette méthode reprend les événements mouseover et mouseout de jQuery en une seule instruction.

Exemple : Si survol d'une des images celle-ci devient opaque et s'agrandit. A la fin du survol elle retrouve son état initial.

Le code de l'exemple :

... <style> img {opacity : 0.2; width : 20%;} ... <body> <img src ="../images/bikini.jpg" /> <img src ="../images/trikini.jpg" /> <script> $("img").hover(function() { $(this).css("opacity","1").width("40%"); } , function() {$(this).css("opacity","0.2").width("20%"); } ); ); ...

Au lieu de deux instructions (l'une avec l'événement mouseover et l'autre avec l'événement mouseout) une seule instruction !

Attention à la syntaxe :
sélecteur.hover(function() { liste instructions } , function() {liste instructions } );
Donc le mot function est employé deux fois. N'oubliez pas la virgule !
La première fonction est exécutée au début du survol et la deuxième lorsque le survol est terminé.
Testez la méthode hover() !

Evénement ready()

Voilà un événement que je n'emploie jamais puisque je place toujours le script après le code HTML. Par contre si le script est placé dans la partie HEAD son emploi est indispensable ; le script doit être exécuté seulement lorsque le DOM est "ready".

Evénements liés à la page

Il s'agit bien sûr des évenements bien connus : load() (sur chargement de la page) et unload() (lorsque la page est quittée).

Ainsi plutôt que d'écrire dans le code HTML : <body onload ="nomfonction()" > donc utiliser une technologie dépassée : le gestionnaire d'événements de HTML.
Il est préférable d'écrire dans le script : $("body").load(function() {...
Ainsi vous ne mélangerez pas les "torchons avec les serviettes" ; le HTML et le Javascript.

Une fonction exécutée une seule fois

On peut parfaitement autoriser en jQuery qu'un seul événement sur un élement (les événements suivants étant sans effet ...)

Dans l'exemple avec un clic l'image est agrandie et bien nette. Mais les clics suivants sont inopérants !

Le code de la page :

... <style> img {opacity : 0.1;width :20%} ... <body> <p class ="remarque">Vous avez le droit avec un clic (mais un seul) de rendre l'image opaque et plus grande. <img src ="../images/bikini.jpg" /> <img src ="../images/trikini.jpg" /> <script> $("img").one("click", function() {$(this).css("opacity","1").width("40%"); }); $("img").mouseleave(function() {$(this).css("opacity","0.1").width("20%"); }); ...

Notez bien l'emploi de la méthode one().
La syntaxe : sélecteur.one("événement, fonction) Testez la méthode one() !

Déclencher un événement

Jusqu'à présent c'est l'utilisateur qui déclenche un événement : clic, double clic, survol d'un élément, utilisation de la molette, déplacement du curseur, sélection d'une zone de saisie, appui sur une touche du clavier, etc.

Or il peut être intéressant de créer un événement suite à un événement produit par le visiteur.

Exemple

Si dans liste déroulante l'utilisateur a sélectionné l'option ayant pour valeur "autres" alors un champ texte (qui était "disabled") peut alors être sélectionné pour une saisie.

Le code de l'exemple

... <style> label, select, input{display : inline-block ; width : 40% ; } ... <body> <form> <label>Jeux de cartes pratiqués : </label> <select id ="jeux" size ="6"> <option value ="belote">belote</option> <option value ="tarot">tarot</option> <option value ="bridge">bridge</option> <option value ="poker">poker</option> <option value ="autres">autres</option> <option value ="aucun">aucun</option> </select> <label>Précisez votre choix "autres" !</label><input type ="text" id ="precision" disabled> </form> <script> $("#jeux").change(function() { if($('#jeux option:selected').val() =="autres") {$("#precision").attr("disabled",false).trigger("focus");} }); ...

HTML : une liste déroulante identifiée jeux et un champ texte "disabled".

Script : si choix d'une nouvelle option alors un test est effectué : si la valeur de l'option séléctionnée est "autres" alors le champ texte peut être sélectionné (disabled à false) et il est sélectionné (a le focus).

La méthode trigger() argumentée avec un événement permet donc de produire cet événement.
Retenez la syntaxe : $(sélecteur).trigger("événement")

Cet exemple est aussi l'occasion de montrer un événement de formulaire : change.
Testez le code ci-dessus !

On remarque que par défaut le champ texte est grisé et qu'il est impossible d'insérer le point d'insertion dedans puisqu'il est désactivé.

La méthode on

Exemple

<style> img {display : inline-block ; width : 20%; margin : 2%;} ... <img src ="../images/bikini.jpg" /> <img src ="../images/trikini.jpg" /> <script> $("img").on("mousemove touchmove",function() { var x = $(this).offset().left; var y = $(this).offset().top; x= x+20 ; y = y+20 ; $(this).offset({left: x , top : y}); });

Sur survol par la souris ou avec le doigt, un objet doit se déplacer horizontalement dans le canevas.
Donc deux événements doivent déclencher les mêmes actions.
On peut imaginer deux instructions (une pour chaque événement) mais on peut aussi utiliser la méthode on avec une liste d'événements déclencheurs.

Commentaire

La méthode on argumentée avec N événements. Il suffit de séparer les différents événements par un espace.
C'est l'équivalent en jQuery de la méthode addEventListener.
Reconnaissez que c'est très pratique !

Attention cette méthode ne fonctionne que si vous disposez d'une version récente de jQuery !
La méthode on() remplace en effet la méthode bind qui permettait aussi d'associer plusieurs événements à un sélecteur.
Retour menu