Gestion des événements avec jQuery

Les événements sont des situations qui se produisent dans notre document HTML, peut être déclenché par des situations du système lui-même ou par des actions de l'utilisateur. Dans les deux cas, lorsqu'un événement se produit, il est possible de faire un post-traitement en utilisant jQuery, afin que nous puissions obtenir de meilleurs effets dans nos programmes.
Ceci est de la plus haute importance, car connaissant cet aspect et avec l'aide du framework, nous pouvons donner plus de dynamisme à nos pages Web et à nos applications.
C'est la première chose à laquelle nous devons répondre lorsque nous travaillons avec des événements dans jQuery, Nous avions déjà dit que les événements sont des actions ou des situations qui sont déclenchées par le système ou par l'utilisateur, par exemple, lorsque le document a fini de charger le système déclenche l'événement prêt ou prêt, lorsqu'un utilisateur clique sur un élément, un événement homonyme est déclenché.
Avec ces petits exemples en tête, on peut alors voir la syntaxe de base pour gérer tout type d'événement, qui est la suivante :

$ (sélecteur) .on ("nom_événement", fonction () {….})

Rappelons ou précisons que le sélecteur est le nom avec lequel nous allons localiser l'élément au sein de notre document, puis à l'aide de la méthode .sur () Nous pouvons alors lui dire quel événement il doit écouter et quand il le détecte, il peut exécuter une fonction anonyme dans notre section de script du HTML.
Quelque chose d'intéressant que nous pouvons souligner est que nous pouvons utiliser un gestionnaire pour divers événementsAutrement dit, on peut effectuer la même action pour plusieurs situations, il suffit de lister les différents événements qu'il faut écouter, la syntaxe est très similaire à celle que l'on vient de voir.
$ (sélecteur) .on ("nom_événement1 nom_événement2 nom_événement3….", fonction () {….})
Puisque nous connaissons les plus élémentaires, nous devons aussi commencer à savoir que jQuery Cela nous facilitera toujours la vie en tant que développeurs, il a donc fourni quelques raccourcis pour créer des gestionnaires d'événements, avec cela nous n'avons pas à faire la déclaration complète comme nous l'avons vu dans la partie précédente, mais nous appliquons ces raccourcis directement au sélecteur.
Voyons quelques-uns des raccourcis les plus intéressants utilisés par les développeurs, il est à noter qu'il ne s'agit pas de la liste complète de ceux disponibles, pour obtenir cette liste il vaut mieux aller directement dans la documentation officielle, cependant pour avoir un petit début sur le sujet, ceux-ci sont plus que suffisants.
prêt ()S'exécute lorsque tous les éléments du document SOLEIL ils sont chargés, c'est-à-dire lorsque le site est prêt, d'où son nom. Il convient de noter qu'il s'agit d'un événement système.
nous faire parvenir ()Cela arrive quand on fait un soumission de formulaireLa chose intéressante est que lorsque le formulaire se produit, il n'envoie pas de manière traditionnelle, mais attend plutôt ce que cet événement lui dit, nous pouvons donc l'utiliser comme point intermédiaire pour les validations de champ pour citer un exemple de son utilisation.
Cliquez sur ()Il s'exécute lorsque l'utilisateur fait Cliquez sur avec le pointeur de la souris sur un élément, il peut provenir d'un champ de type de saisie, pour inclure des éléments tels que ou les ancres . Comment nous pourrions dire est un événement déclenché par l'utilisateur.
se brouiller ()Cela se produit lorsque l'élément sur lequel nous sommes en ce moment est flou, par exemple nous écrivons dans un champ de texte et nous passons à un champ suivant, dans ce cas le premier champ a perdu le focus et cet événement est exécuté.
concentrer ()Contrairement à l'événement précédent, cela se produit juste lorsque nous nous concentrons sur un élément.
survoler ()Cet événement se produit lorsque nous passons le pointeur de la souris sur un élément du SOLEIL, peut généralement être appliqué à et ancres .
sélectionnez ()Se produit lorsque nous sélectionnons un élément dans un champ sélectionnerPar exemple, nous avons une liste déroulante et nous choisissons un élément dans son contenu.
changement ()Se produit lorsque la valeur ou l'état d'un élément change, par exemple dans un champ sélectionner, lorsque nous modifions l'option que nous y voyons reflétée.
Puisque nous connaissons un peu les événements les plus utilisés, nous allons générer un petit document qui met en pratique certains d'entre eux, soit dans leur syntaxe complète, soit avec des exemples, afin que nous puissions expérimenter les deux formes.
Dans le code suivant, nous verrons comment nous allons initialement écrire avec console.log() quand nous avons le document dans prêt (), alors nous appliquerons un autre message lorsque nous passerons la souris sur un pour confirmer comment ça marche flotter, enfin nous verrons comment utiliser Cliquez sur () Oui concentrer () pour afficher d'autres messages. Regardons le code qui décrit ce qui précède :

 Exemple d'événement 1
Passez la souris sur cette Div !!

Écrivez quelque chose ici :
Concentrez-vous sur moi :
$ (document) .ready (function () {console.log ("L'événement ready s'est produit !!");}); $ ("# hover event").hover (function () {console.log ("Hover event s'est produit !");}); $ ("# événement Click"). click (function () {console.log ("nous avons déclenché un événement Click) AGRANDIR
Cela se produit lorsque nous voulons qu'un élément ait différents événements associés, de cette manière nous pouvons mieux organiser notre code et fournir plusieurs fonctionnalités à notre élément.
Il y a deux possibilités, exécuter la même action pour plusieurs événements ou exécuter une action différente pour chacun, de quelque manière que ce soit, nous devrons utiliser la syntaxe complète, la première que nous avons déjà définie au début.
Voyons comment lier différentes actions à différents événements pour le même élément. Pour cela, nous devons utiliser une syntaxe de base comme la suivante :

 $ (sélecteur) .on ({EventName1 : fonction () {…}, EventName2 : fonction () {…}}); 

Comme nous pouvons le voir, en utilisant cette forme de syntaxe, nous évitons d'avoir à faire quelque chose comme ceci :

 $ (sélecteur) .ShortcutEvent1 (fonction () {}); $ (sélecteur) .ShortcutEvent2 (fonction () {}); 

Ce qui nous permet d'être plus organisé, cependant les deux sont valables et c'est au développeur d'appliquer celle qui lui convient le mieux.
Puisque nous savons lier plusieurs événements à un élément, nous allons le mettre en pratique, nous allons sélectionner les événements Cliquez sur () Oui concentrer () Pour cet exemple, nous allons ensuite les appliquer à deux éléments, dans le premier élément nous allons générer la même réponse pour chacun d'eux, et dans le second chaque événement aura sa propre réponse. Voyons le code que nous devons exécuter pour atteindre notre objectif :

 Exemple d'événement 2
Même résultat plusieurs événements :

Différents résultats par événement :
$ ("# element1"). on ("click focus", function () {console.log ("on montre la même chose pour 3 événements!");}); $ ("# element2"). on ({click: function () {console.log ("nous avons cliqué sur element2");}, focus: function () {console.log ("nous nous sommes concentrés sur element2 ");}}); 

Ici, nous voyons que nous devons être prudents avec la deuxième forme de réponses différentes pour différents événements, car les événements ne vont pas entre guillemets comme lorsque nous le faisons dans la première forme, également que nous devons mettre entre crochets {} tout dans la méthode .sur (), c'est une erreur qui peut arriver très souvent donc avec cette précaution nous pouvons l'éviter. Voyons maintenant à quoi ressemble notre exemple lorsque nous l'exécutons dans notre navigateur :

AGRANDIR
On note le compteur avec un numéro 2 lorsque les événements sur le premier élément se produisent, cela signifie que nous avons fait la même action deux fois comme nous l'avions prévu. Dans le deuxième élément, nous remarquons que nous imprimons les deux actions déterminées dans la console, bien que nous voyions également qu'elles se produisent dans un ordre différent de celui dans lequel nous les avons placées, c'est parce que l'événement de concentrer se passe avant le Cliquez sur dans la hiérarchie des événements, surtout si nous utilisons la clé LANGUETTE se déplacer entre les champs.
À la fin de ce didacticiel, nous avons appris comment nous lancer dans le monde de la gestion d'événements avec jQueryCeci n'est qu'un ouvre-bouche, mais avec ces petites fonctionnalités, nous pouvons réaliser beaucoup de choses dans nos applications.

Ce tutoriel vous a-t-il aidé ?
Sinon

AIDEZ A AMÉLIORER CE TUTORIEL !
Pensez-vous pouvoir corriger ou améliorer ce tutoriel ? Vous pouvez envoyer votre édition avec les modifications que vous jugez utiles.
0 utilisateurs ont modifié ce tutoriel. Editez et devenez un expert reconnu !
Modifier ce tutoriel

TUTORIELS SIMILAIRES

Comment faire glisser et saisir des images avec JQuery UIComment faire un Spinner ou une icône de chargement avec JQueryPlugins et bibliothèques JQuery pour le développement WebGrille dynamique Flexigrid avec JQuery et PHPGestion JSON avec Node.jsGestion des événements dans Node.jsGestion des tampons dans Node.jsExpressions régulières avec Jquery
Sans commentaires, soyez le premier!
N'attendez plus et entrez dans SolveticLaissez vos commentaires et profitez du compte utilisateur Rejoignez-nous !

Créer un compteInscrivez-vous GRATUITEMENT pour avoir votre compte SolveticEnregistrez un compte
IdentifierAvez-vous déjà un compte? Se connecter iciIdentifiez-moi dans mon compte




Information

 Publié 12 déc. 2014 14:44
 Actualisé 14 déc. 2014 05:44
 Visites 3.7K
 NiveauProfessionnel


Derniers tutoriels JavaScript

Comment mettre à jour NPM avec PowerShell dans Windows 10
Comment faire glisser et saisir des images avec JQuery UI
Comment faire un Spinner ou une icône de chargement avec JQuery
Comment faire traduire un site web en plusieurs langues

Voir plus de JavaScript