jQuery : les évènements

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 Javascript traditionnel et repris en jQuery.
Il y a aussi des évènements spécifiques à Jquery.

évènements de la souris
évènements du clavier
évènements propres aux formulaires
évènements propres à jQuery
évènements liés à la page

Evénements de la souris

évènement	sens
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

l'évènement click
l'évènement mouseover (ou mouseenter)
l'évènement mouseout (ou mouseleave)
l'événenent scroll

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.

Le rendu du code :

Exemple 2

Affichage en permanence de la position du pointeur.

Le code de la page d'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.

Dans le cadre ci-dessous déplacez le curseur et observez ...

Les évènements de clavier

Evénement	sens
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 ce code dans un autre onglet

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 :

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(); }); // 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();} // 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" !

Le rendu du code dans un nouvel onglet : Testez !

Dans l'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.

Exercice : enrichissez le code afin que la boule puisse aussi se déplacer vers le haut et le bas et qu'elle puisse sortir du billard.

Des évènements de formulaire

focus() : lorsqu'une zone de saisie est sélectionnée (pointeur sur le champ)
blur() : lorsqu'une zone de saisie perd le focus

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() !

Testez le code :

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

Certains évènements sont spécifiques à la la librairie 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 : ... <body> <p>Survolez une des images pour qu'elle devienne opaque et agrandie. <br><img src ="../images/bikini.jpg" style ="opacity :0.1 ; width : 20%;" /> <br><img src ="../images/trikini.jpg" style ="opacity :0.1 ; width : 20%:" /> <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é.

Le rendu du code :

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).

Plutôt que d'écrire dans le code HTML : <body onload ="nomfonction()" >, il est préférable d'écrire dans le script : $("body").load(function() {...

Une fonction exécutée une seule fois

On peut parfaitement autoriser en jQuery qu'un seul évènement sur un élément (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 : ... <body> <p class ="remarque">Vous avez le droit avec un clic (mais un seul) pour rendre l'une des images opaque et plus grande. <br><img src ="../images/bikini23.jpg" style ="opacity :0.1 ; width : 20%;" /> <br><img src ="../images/bikini26.jpg" style ="opacity :0.1 ; width : 20%:" /> <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 le code :

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") est alors 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 :

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

La méthode on(event1 event2 ... eventN") permet d'associer à une seule fonction plusieurs évènements.

Thématique

Sur survol par la souris (mousemove) OU avec le doigt (touchemove), un objet doit se déplacer horizontalement dans le canevas.

Le code correspondant

<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}); 
});

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 en Javascript standard.
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.

Testez le code avec un PC puis une tablette :

Les images se déplacent vers la droite et le bas. Si vous voulez un déplacement dans tous les sens, il faut utiliser la méthode drag() qui n'est pas disponible dans le jQuery de base mais dans une extension ... jQuery UI.
Il y a tout un chapitre sur cette extension. Voir le sommaire du tuto.

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

jQuery : les évènements

Evénements de la souris

Exemple 1

Le code CSS & HTML de l'exemple

Le script

Exemple 2

Le code de la page d'exemple

Les évènements de clavier

Premier exemple

Exemple 2

Exemple 3

Des évènements de formulaire

Exemple

Le code de l'exemple

Evènements propres à jQuery

Evènement hover

Evènement ready()

Evènements liés à la page

Une fonction exécutée une seule fois

Déclencher un évènement

Exemple

Le code de l'exemple

La méthode on

Thématique

Le code correspondant

Commentaire