Comment utiliser les événements avec le Framework jQuery

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

JavaScript est un langage événementiel. Forcément, jQuery met à profit cette particularité avec une implémentation simplifiée.

Apprenez dans la formation ci-dessous à utiliser les événements directement depuis jQuery.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

Comment utiliser les événements avec le Framework jQuery

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau cours, toujours dédié au Frameworks jQuery, vous allez apprendre à utiliser les événements, il faut savoir que JavaScript c’est un langage événementiel, il y a plusieurs événements qui sont diffusés, il suffit de les capturer et de faire les changements voulus, c’est très utiliser le système d’événementiel avec l’Ajax, là avec jQuery ça va simplifier grandement l’utilisation des événements.

Gestion des événements

Comment ça marche ?
Si vous avez fait attention au cours précédent, vous avez remarqué que j’utilise l’événement click, dès que l’utilisateur clic sur un bouton, une fonction est associée à ce clic, et ça permet avec jQuery d’effectuer différentes modifications, $p.click, on associe une fonction au clic, donc dès que l’utilisateur va cliquer sur un paragraphe, si on veut on peut modifier le background de CSS du paragraphe, passer la police en italique, tout ce que l’on souhaite.

Dblclick ça associe l’événement double clic, je dois vous avouer que dans le Web, le double clique est très peu utilisé, mais bon je vous donne quand même la méthode, comme ça si vous souhaitez développez un site HTML 5 qui gère le double clic, vous aurez tout ce qu’il faut pour le gérer.

Vous avez le focus, ça c’est dès que l’utilisateur, par exemple, dans un formulaire il sélectionne un champ de texte pour commencer à le renseigner, l’événement.focus est appelé et après libre à vous de faire ce que vous souhaitez dans cette fonction.

Vous avez blur, une fois que l’utilisateur a rempli le formulaire, il va sortir du focus, sortir du formulaire pour sélectionner autre chose, l’événement blur se déclenche lorsque l’élément perd le focus, ça peut être par exemple avec JavaScript dans un formulaire, dès que l’utilisateur est en focus, vous pouvez vérifier ce qu’il tape en direct, ou alors on blur, dès que le formulaire perd le focus, l’élément perd le focus, il y a une fonction JavaScript qui s’exécute qui vérifie si l’utilisateur a renseigné correctement le champ de ce formulaire et comme ça, ça permet de lui afficher un message en direct, l’avantage de jQuery, vous accédez plus facilement à cet élément là, vous informez l’utilisateur, non ton adresse mail est mauvaise. Ca fait que votre site HTML 5 est beaucoup plus rapide, car il n’y a pas besoin d’appuyer sur valider du formulaire qui va rappeler une autre page PHP, effectuer d’autres traitements, non, en directe, pendant que l’utilisateur tape, une fois qu’il quitte le focus, vous vérifiez ce qu’il a tapé, vous lui dites tout de suite, non par exemple quand il renseigne un pseudo pour s’inscrire sur votre site, vous pouvez une fois qu’il y a le blur, quand l’élément blur s’est déclenché qu’il tape son mot de passe, vérifiez, interrogez la base de donnée de l’Ajax en direct, ah non, ce pseudo est déjà utilisé comme ça il le modifie en direct, très pratique.

Scroll ça associe une fonction à l’utilisation de la barre de défilement de l’événement, si vous faites scroller un événement vous pouvez associer une fonction avec jQuery et faire ce que vous souhaitez, des fois on peut faire des événements élastiques sur le scroll, des choses comme ça, à vous de voir.

Mousedown c’est lorsque l’utilisateur presse une touche de la souris, sélectionne un élément,
Mouseup c’est quand il relâche le bouton de la souris, sur un bouton mousedown on appuie sur le bouton, mouseup on relâche le bouton et donc vous pouvez associer des fonctions à ceci.

Exemple d’application

Je vous montre un exemple de code source, comme ça, ça vous parlera beaucoup mieux, alors comme d’habitude, ne vous inquiétez pas, le code source est commenté donc événement clique sur le menu, on les fait disparaître, uniquement certains, alors je recharge la page, regardez, click slide up, ça va masquer la div mais uniquement sur celles qui ont la classe menu, c’est pour ça que le 10 et le 12 n’ont pas disparu.
Le 11 il peut disparaître, mais pas du tout le 2, et si je clique sur les autres, ils disparaissent également, parce que le clic est associé uniquement aux divs avec la classe menu.

Vous avez le double clic, ça c’est sur le 10 et le 12, je clic une fois, il ne part pas le 12, je clic une fois il ne part pas, deux fois, il disparait.
Voilà, ce sont des exemples, qu’est-ce que vous avez d’autre dans ce code source ? Le focus, et le blur, donc le focus, obligatoire, on affiche obligatoire, blur OK, cliquez ici, on a modave, mossave, maussades, moldaves, maussades, clic et donc là on peut faire défiler le texte et vous voyez on affiche un message, vous utilisez la barre de défilement.

Votre plan d’actions !

C’est un exemple tout simple où à chaque fois, input mail, la balise input avec l’Id mail, qui est ici, on associe à chaque fois qu’il y a un événement, on associe des modifications.
Je vous invite à étudier le code source de votre côté, à le tester, le modifier, l’implémenter dans votre HTML 5, comme d’habitude, vous pouvez télécharger le code complet sous ce cours vidéo, si vous avez des questions posez-les sous ce cours vidéo également, et moi je très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple jQuery

Et voici l’exemple de code source accompagnant le cours.

Downloads

Comment avez-vous implémenté des événements jQuery

Utilisez les commentaires, pour me dire quels types d’événements (double click par exemple) et pour quelles fonctionnalités, vous avez utilisé jQuery.

Créez Rapidement des Sites Hyper-Interactifs avec vos utilisateurs grâce à la Formation Gratuite jQuery Facile !

Recevez les Stratégies pour utiliser le Potentiel des Frameworks jQuery et Dojo
+
Logo jQuery
+
Des Tutoriels Gratuits Supplémentaires pour utiliser toute la "Richesse" du Framework de Google : AngularJS