Accueil

Traduction

Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

jQuery : les événements (ou évènements)

Il y a deux facons d'écrire ce mot : un accent aigu ou grave pour le deuxième E.
Cependant l'Académie française conseille d'utiliser un accent aigu sur le deuxième E.

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

Evénements de la souris

évé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

Les événements les plus utilisés sont click, mouseover et mouseout.

Exemple 1

Une page contient des images petites et transparentes et un boite rose dont le contenu est en partie masquée.
Sur survol d'une image, celle-ci s'agrandit et devient opaque.
Sur clic dans la boite rose, la hauteur de celle-ci est ajoutée au contenu.

Le code CSS & HTML

Le script

Après le clic ou le survol les éléments doivent retrouver leur aspect initial.

$("img").mouseover(function() {$(this).css({opacity :  "1", width:"30%"});}); 
$("img").mouseout(function() {$(this).css({opacity :  '', width:''});});
// emploi de la notation {clé:valeur,clé:valeur}  

$('div').click(function() {$(this).css("height", "auto") ; });
$('div').mouseout(function() {$(this).css("height","");});	

Le rendu

Exemple 2

Objectif : affichage en permanence de la position de la souris dans la fenêtre.

Le code de la page

Utilisation de l'événement mousemove.

Les propriétés event.pageX et event.pageY retournent les coordonnées X et Y de la souris dans la fenêtre. Ces coordonnées sont fonction de la taille de la fenêtre ...

Le rendu

Déplacez la souris dans la fenêtre et observez.
Réduisez la largeur de la fenêtre ; les valeurs des positions extrèmes changent !

Exemple 3

Il est souvent utile de connaitre la position de la souris, non pas dans la fenêtre, mais dans une boite.

Le code correspondant

Dans le script "this" fait référence à la boite DIV.

Le rendu

Les infos retournées ne dépendent plus de la largeur de la fenêtre.

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 :

Utilisation de deux événements de clavier: keydown, keyup.

Testez ce code dans un nouvel onglet

Exemple 2

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

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 touches de déplacement du clavier.

Le code CSS et HTML

On dessine un billard et une boule dans ce billard.
Notez l'astuce CSS pour dessiner un boule : une carré rouge avec des angles arrondis.

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();    
	}); 
	
// deux 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() qui précise la position de l'objet dans la fenêtre.

Le rendu du code dans un nouvel onglet

Affichez l'animation !

Exercice

Enrichissez le script afin que la boule puisse aussi se déplacer vers le haut et le bas et qu'elle ne puisse plus sortir du billard.

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.

Objectif : 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 CSS & HTML

Le script

$("img").hover(function() {$(this).css("opacity","1").width("30%");}
, 
function() {$(this).css("opacity","").width(""); });

Au lieu de deux instructions (l'une avec l'événement mouseover et l'autre avec l'événement mouseout) une seule instruction mais qui contient deux fonctions !
La première fonction est exécutée au début du survol et la deuxième lorsque le survol est terminé.

Attention à la syntaxe :
sélecteur.hover(function() { liste instructions } , function() {liste instructions } );

Le rendu

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

Exemple

En cliquant sur l'image, elle s'agrandit et devient bien nette. Mais les clics suivants sont inopérants !

Le code HTML

Le 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 HTML

Une liste déroulante identifiée jeux et un champ texte "disabled".

Le script

$("#jeux").change(function()
{
	if($('#jeux option:selected').val() =="autres")  
			{$("#precision").attr("disabled",false).trigger("focus");}
	});
...

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'écrire 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. Ne confondez pas avec "one" !

Exemple

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

Le code HTML

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

La méthode on est 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 du Javascript depuis sa version 6.
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.