La gestion des événements est une autre de ces grandes raisons d'utiliser jQuery. Il existe des différences entre les navigateurs dans la façon de procéder, que jQuery normalise en une seule API simple, tout en appliquant certaines meilleures pratiques.
Il y a essentiellement une méthode que vous devez connaître: .on()- cela fonctionne comme ceci:
$("button").on("click", function() ( // do something ));Ici, nous ne donnons à la .on()méthode que deux paramètres. Le nom de l'événement («clic») et une fonction à exécuter lorsque cet événement se produit sur l'un des éléments de cette sélection. Lit assez proprement, n'est-ce pas?
Les personnes ayant une certaine expérience de jQuery précédente pourraient se familiariser avec d' autres méthodes contraignants comme le .bind(), .live()ou .delegate(). Ne vous inquiétez plus de cela, jQuery moderne les a tous combinés dans .on()ce qui fait toujours la meilleure pratique.
Lors de la liaison d'un événement comme nous l'avons fait ci-dessus, vous pouvez (et il est généralement judicieux de) inclure un nom de paramètre dans la fonction. Ce paramètre sera «l'objet événement» à l'intérieur de la fonction:
$("button").on("click", function(event) ( // event => "the event object" ));Grâce à cet objet événement, vous obtenez beaucoup d'informations. Vous le connaissez déjà un peu parce que nous l'avons utilisé .preventDefault()et .stopPropagation(). Mais il y a aussi beaucoup d'autres informations directes dans cet objet. Des choses comme le type d'événement dont il s'agissait (au cas où plusieurs événements déclenchent cette même fonction), quand cela s'est produit, où cela s'est produit (coordonnées, le cas échéant), sur quel élément il s'est produit, et bien plus encore. Cela vaut la peine d'inspecter régulièrement l'objet événement lors du codage.
Il existe un concept de délégation d'événements qui est extrêmement important dans le travail avec des événements. C'est une pratique exemplaire des temps modernes très intelligente. Il incorpore l'idée de portée.
Une façon traditionnelle de penser à la liaison d'événement est comme «trouver tous les boutons de la page et leur lier un événement de clic». Cela fonctionne bien sûr, mais c'est:
- Pas très efficace
- Fragile
Pas efficace, car vous obligez immédiatement JavaScript à trouver tous ces éléments de bouton alors que, avec la délégation, vous pourriez simplement trouver un élément plus facile à trouver.
Fragile car si plus de boutons sont ajoutés à la page, ils ont déjà raté le bateau sur la liaison et devront être reliés.
Avec la délégation d'événements, vous lieriez cet événement de clic à un élément qui est plus haut dans l'arborescence DOM que les boutons qui les contiennent tous. Peut-être quelque part, peut-être documentlui - même. Lorsque vous liez l'événement de clic à cet élément supérieur, vous lui dites que vous n'êtes toujours intéressé que par les clics qui se sont produits sur les boutons. Ensuite, quand un bouton est cliqué, du fait de la nature du bouillonnement d'événement, ce clic se déclenchera finalement sur l'élément supérieur. Mais l'objet événement saura si le clic d'origine s'est produit sur un bouton ou non, et la fonction que vous avez définie pour se déclencher sur cet événement se déclenchera ou ne se déclenchera pas en sachant cette information.
Dans ce screencast, nous démontrons cela comme ceci:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Maintenant , imaginez si nous avons ajouté une autre que . Nous n'avons pas besoin de lier à nouveau les événements, car l'événement est toujours lié à la portée et les événements continueront de sortir de la zone de texte nouvellement ajoutée. Ceci est particulièrement utile dans les environnements d'applications Web où vous ajoutez régulièrement de nouveaux éléments à la page.
Une autre bonne chose à savoir sur la liaison d'événement jQuery est qu'elles ne s'excluent pas mutuellement. Si vous ajoutez un autre gestionnaire de clics au même élément exactement qui en a déjà un, il en ajoutera simplement un autre. Vous n'écrasez pas le précédent. jQuery gère cela assez gracieusement pour vous. Vous pouvez toujours les dissocier si vous vouliez en effet remplacer une fonction précédemment liée.
S'il s'agit exactement du même événement, sachez que pour dissocier l'un d'entre eux en particulier et pas l'autre, vous devrez espace de noms pour les événements. Cela se produit en utilisant un point dans le nom de l'événement, comme click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), comme nous ne l'avons pas mentionné auparavant, est la façon dont vous dissociez les événements.
Il existe de nombreux événements DOM possibles. Le clic est le plus évident, mais il y a le double-clic, le mouseenter et la souris, le keydown et le keyup, des formes spécifiques comme le flou et le changement, et bien plus encore. Si vous êtes intéressé par la liste complète, vous pouvez en obtenir une comme celle-ci.
Vous pouvez lier plusieurs événements en même temps comme ceci:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Il y a des circonstances où vous attendez qu'un événement se produise, mais une fois que c'est le cas, vous ne vous en souciez plus ou ne voulez plus explicitement déclencher la fonction que vous aviez liée. C'est ça la .one()fonction. Un cas d'utilisation standard pour cela est un bouton d'envoi de formulaire (si vous utilisez Ajax ou autre). Vous voudrez probablement désactiver ce bouton d'envoi après avoir appuyé dessus jusqu'à ce que vous puissiez traiter ces informations et leur donner les commentaires appropriés. Ce n'est pas le seul cas d'utilisation bien sûr, mais gardez cela à l'esprit. .one()== juste une fois.