Cette fois, vous allez apprendre la gestion avancée des événements avec le Framework jQuery.
Vous allez encore plus loin dans la finesse d’écoute des événements.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La méthode de gestion avancée des événements avec le Framework jQuery
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours, rappelez-vous il y avait deux cours précédents consacrés aux événements avec jQuery, et là vous allez passer au niveau supérieur en voyant, en découvrant les éléments avancés avec jQuery, comment les utiliser ?
Gestion avancée des événements
Vous avez par exemple, la méthode bind, qui est plus flexible et plus puissante que les événements comme clic ou mouseover, bind ça permet d’affecter un ou plusieurs événements à un objet jQuery, sur lequel une fonction sera exécutée, donc on peut aussi transmettre des données à cette fonction c’est très puissant. Bind, un événement, des données, et une fonction par exemple, vous avez a#URLByMouseOver mouseOut, sur le lien, l’URL on associe les événements mouseover, mouseout, et une fonction qui modifie le texte, tout simplement. La méthode unbind, elle supprime les actions associées à un événement par la méthode bind.
One, ça associe une fonction à un élément donné, donc la différence avec bind, c’est que la fonction associée à l’événement sera appelée, exécutée qu’une seule fois. Alors si vous associez des événements et une fonction avec bind, se sera appelé autant de fois que l’utilisateur effectuera les événements alors qu’avec one ce sera appelé qu’une seule fois sur le premier événement et les autres fois ce ne sera pas appelé du tout, cette méthode retourne un objet jQuery, c’est très utile pour faire pleins de trucs.
Vous avez trigger donc ça déclenche un événement particulier pour tous les éléments de la sélection, donc ça peut également déclencher l’action par défaut du navigateur pour ce type d’événement si elle existe, bien évidemment, par exemple vous utilisez le type d’événement submit dans un formulaire, cette action par défaut peut être empêchée en retournant false dans une des fonction associées à l’événement, je vous l’ai montré dans un exemple précédent, ou il fallait découvrir le mot de passe pour accéder à la page suivante.
Donc vous pouvez, bien évidemment, utiliser la fonction bind, c’est à vous de voir, selon vos préférences.
Vous avez l’événement Live, ça attache une fonction à un événement donné pour tous les éléments futurs et existants, vous pouvez créer avec jQuery des nouvelles balises, avec live, elle prendra en compte cet événement également.
Exemple d’application
Je vous montre un exemple de code source, c’est parti ! Alors, toujours commenté, comme d’habitude, vous avez un paragraphe, un seul clic permis sur bouton, cocher la case, désactiver le clic et cliquez-moi, qu’est-ce que ça donne ?
allover changement de couleur de background, l’événement ici, color background, on a fait un bind sur mouseenter, mouseleave et on fait un toggleClass over, donc on ajoute la classe over, on la supprime, et l’événement bind associé à deux éléments d’un seul coup à la même balise, c’est génial, en une seule … avant il fallait taper, par exemple, tout ça de lignes de code pour les événements mouseover, mouseclic, là une seule ligne de code, mouseover, mouselive, vous faites un toggle classe direct, là vous pouvez cliquer une seule fois, ça ne sert à rien de cliquer plusieurs fois, qu’est-ce qu’on a fait sur l’événement sur le bouton oneclick ? One clic, on regarde, oneClic one inutile, on a cliqué une seule fois, ça ne sert à rien, ensuite check, ça associe une alerte sur la case à cocher, vous cochez la case checkbox cliqué, vous pouvez faire ici, à chaque fois ça affiche une alerte, soit sur la case, soit sur le lien, et ici lorsque vous cliquez, ajouter un nouveau paragraphe, tout simplement.
Votre plan d’actions !
C’est avec la fonction liveon pardon, sur le clique, comme d’habitude vous retrouverez un exemple de code source à télécharger sous ce cours vidéo, si vous avez des questions posez-les également sous ce cours 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 source commenté de l’exemple du cours.
Téléchargement du code source Exemple de gestion avancée des événements avec jQuery
