TP – Les événements avec jQuery
Partie 1 : Les événements de la souris
Rappel jQuery
• .on('click', ...) : déclenché lorsqu’on clique sur un élément
• .on('mouseover', ...) : déclenché lorsque la souris entre dans un élément
• .on('mouseout', ...) : déclenché lorsque la souris sort de l’élément
• .on('mousedown', ...) : bouton de la souris enfoncé
• .on('mouseup', ...) : bouton de la souris relâché
• .on('dblclick', ...) : double clic
Exercice 1 : Alerte simple
Créer un bouton. Lorsqu’on clique dessus, une alerte s’affiche avec le message "Bonjour !".
Utiliser jQuery pour attacher l’événement.
Exercice 2 : Survol d'une zone
Créer une zone grise (div). Quand la souris passe dessus, elle devient bleu clair. Quand elle
sort, elle redevient grise.
Utiliser .on('mouseover', ...) et .on('mouseout', ...) en jQuery.
Exercice 3 : Double-clic sur un texte
Créer un paragraphe avec du texte. Quand l’utilisateur double-clique dessus, le texte devient
"Texte modifié !".
Exercice 4 : Suivi des interactions souris
Créer une zone rectangulaire. Gérer les événements suivants avec jQuery, et afficher un
message dans la console :
• Souris entre : "Souris entrée"
• Souris sort : "Souris sortie"
• Clic : "Clic détecté"
• Double clic : "Double clic détecté"
• Bouton enfoncé : "Bouton enfoncé"
• Bouton relâché : "Bouton relâché"
Application : Carte produit interactive
Créer une carte produit contenant :
• une image
• un titre
• un bouton "Ajouter au panier"
Comportements à implémenter :
1. Quand la souris entre dans la carte, un effet visuel (bordure, ombre) apparaît. Il
disparaît à la sortie.
2. Quand on clique sur l’image, afficher "Aperçu du produit" dans la console.
3. Quand on double-clique sur le titre, le texte devient "Produit sélectionné".
4. Quand on clique sur le bouton, une alerte s’affiche avec "Produit ajouté au panier".
Utiliser uniquement jQuery pour tous les événements.
Partie 2 : Les événements du clavier
Rappel jQuery
• .on('keydown', ...) : lorsqu’une touche est enfoncée
• .on('keyup', ...) : lorsqu’une touche est relâchée
• .on('keypress', ...) : (obsolète pour certains cas, mentionné pour culture
générale)
Exercice 1 : Touche enfoncée
Créer un champ de saisie. Lorsqu’une touche est enfoncée, afficher "Touche enfoncée" dans
la console.
Utiliser .on('keydown', ...)
Exercice 2 : Touche relâchée
Créer un champ de saisie. Lorsqu’une touche est relâchée, afficher "Touche relâchée" dans la
console.
Utiliser .on('keyup', ...)
Exercice 3 : Affichage du code de la touche
Créer un champ de saisie et un paragraphe vide.
Quand on appuie sur une touche, afficher dans le paragraphe le code de la touche (par
exemple : a, Shift, Enter).
Utiliser .on('keydown', ...)
Exercice 4 : Compteur de frappes
Créer un champ de saisie et une zone de texte indiquant le nombre de caractères saisis :
"Nombre de caractères saisis : X"
Mettre à jour ce compteur à chaque keyup.
Application : Filtrer dynamiquement une liste de clients
Créer une interface contenant :
• Un champ de recherche
• Un tableau HTML avec des lignes remplies via un tableau JavaScript (au moins 5
clients)
Comportement attendu :
• Lorsqu’on tape dans le champ, filtrer dynamiquement les lignes du tableau
• Seules les lignes dont le nom contient le texte saisi doivent rester visibles
Utiliser .on('keyup', ...) avec jQuery pour déclencher le filtrage.
Partie 3 : Événements supplémentaires (focus, blur,
change)
Rappel jQuery
• .on('focus', ...) : quand un champ reçoit le focus
• .on('blur', ...) : quand un champ perd le focus
• .on('change', ...) : quand la valeur d’un champ change
Exercice 1 : Focus
Créer un champ de saisie. Lorsqu’il reçoit le focus, afficher dans la console :
"Champ activé"
Utiliser .on('focus', ...)
Exercice 2 : Blur
Créer un champ de saisie. Lorsqu’il perd le focus, afficher dans la console :
"Champ désactivé"
Utiliser .on('blur', ...)
Exercice 3 : Change sur un champ texte
Créer un champ de saisie. Quand sa valeur est modifiée puis qu’on clique ailleurs, afficher
dans la console :
"Nouvelle valeur : [valeur]"
Utiliser .on('change', ...)
Exercice 4 : Change sur un select
Créer une liste déroulante avec au moins 3 villes. Lorsqu’on sélectionne une ville, afficher
dans un paragraphe :
"Ville sélectionnée : [ville]"
Utiliser .on('change', ...)
Application : Formulaire de contact intelligent
Créer un formulaire Bootstrap avec les champs :
• Prénom
• Email
• Sujet (select)
• Message (textarea)
Comportements à implémenter :
1. Lorsqu’on clique dans le champ email, afficher : "Nous ne partagerons jamais votre
email" dans un paragraphe informatif.
2. Lorsqu’on quitte le champ prénom et qu’il est vide, afficher une alerte : "Veuillez
entrer votre prénom."
3. Lorsqu’on sélectionne un sujet, afficher dans un paragraphe : "Sujet choisi : [valeur]"
Tous les événements doivent être attachés uniquement via jQuery.
