Apprenez à écouter la souris de l’internaute, à valider rapidement un formulaire sans recharger la page.
Tout est dans le cours vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La technique pour écouter les événements avec le Framework jQuery
Bonjour à tous et bienvenu sur Développement Facile.
Dans le cours précédent, vous avez commencé à découvrir l’utilisation des événements avec jQuery, sachant que les événements c’est important en jQuery, un gros morceau, donc là, c’est la deuxième partie justement, consacrée aux événements avec jQuery.
Gestion des événements
On rentre tout de suite dans le vif du sujet avec l’événement mousemove, dès que l’utilisateur bouge la souris, on peut associer une fonction, $div.mousemove, sur une balise div, dès que l’utilisateur bouge la souris au-dessus de la balise div, vous appelez une fonction, vous exécutez les instructions que vous souhaitez.
Vous avez également mouseover, je vous ai montré un exemple dans le cours précédent, c’est lorsque l’utilisateur place le curseur au-dessus d’un élément,
Mouseout c’est lorsque le curseur quitte cet élément,
Mouseenter c’est lorsque le pointeur entre dans un élément, donc c’est l’équivalent de mouseover,
mouseleave lorsque le pointeur quitte un élément ce qui est l’équivalent de mouseout.
Moi je vous conseille plutôt d’utiliser mouseenter et mouseleave plutôt que mouseover et mouseout, après vous choisissez ce que vous souhaitez.
Submit, ça va déclencher l’appel de la fonction lors de l’envoi du formulaire, très utile pour, comme je vous l’ai dit, si vous ne voulez pas utiliser focus et blur, vous pouvez utiliser .submit, l’utilisateur appuie sur le bouton .submit, au lieu d’appeler directement la page suivante PHP, que ça perde du temps à tout vérifier, que ça dise non à l’utilisateur, qu’il s’est trompé, vous appeler submit, ça va appeler une fonction JavaScript donc avec jQuery, vous faites un vérification du formulaire si tout se passe bien, vous faites return true, la page suivante est appelée, on en parle plus, sinon vous affichez le message qui correspond à l’utilisateur, veuillez renseigner un pseudo correcte, une adresse mail correcte etc.
Vous avez d’autres événements :
change, ça déclenche un événement lorsque le contrôle d’un formulaire est modifié, par exemple lorsqu’une une case à cocher d’un formulaire est cochée, l’événement change est déclenché,
L’événement error c’est lorsque une erreur survient dans le script,
keydown c’est lorsque l’utilisateur touche une touche du clavier,
keyup il relâche la touche du clavier,
keypress c’est lorsqu’elle est pressée, lorsqu’un caractère est encodé.
Load, et unload, c’est lorsque la page se charge pour load, et unload lorsque la page est quittée,
resize c’est lorsque vous modifiez la taille d’un élément, souvent dans les formulaires il y a un champ texte, l’utilisateur peut modifier la taille de son texte, l’événement resize est diffusé,
select c’est lorsque l’utilisateur sélectionne un texte avec sa souris pour faire un copier-coller, l’événement select est déclenché, tout simplement.
Je vous montre un exemple de code source, ce sera beaucoup plus parlant pour vous, alors voilà, j’ai commenté mouseover exprès parce qu’il y a plusieurs choses, ce sera à vous de dé commenter et de faire des tests, mousemove, voilà, là mousemove on donne la position du curseur, dès qu’on sort on fait disparaitre, identifiant pour accéder au site, envoyer, mot de passe invalide, donc ça évite de recharger la page, et si je mets l’identifiant correct, envoyer, on appelle le site suivant, on appelle la page suivante, ça c’est la méthode submit, regardez submit, elle est quelque part par-là, elle est ici, et si le mode passe correct, on retourne true, on appelle la page suivante, sinon on retourne false, et on peut afficher un message à l’utilisateur, mot de passe non valide, recommencez.
Regardez, ici, form action on fait une redirection JavaScript, tout simplement. Mouseover, regardez, on change la background color, mouseout on change la background color, la position de la souris, voilà.
Comme d’habitude retrouvez le code source complet en téléchargement sous ce cours vidéo, si vous avez des questions, posez-les sous la vidéo, et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple jQuery
Et voici le code JavaScript commenté pour les événements avec jQuery.
Téléchargement du code source Exemple pour écouter des événements avec jQuery
