Qu'est-ce que c'est et comment utiliser la méthode jQuery on ()

jQuery est une bibliothèque Javascript, qui permet de simplifier la façon d'interagir avec les documents HTML, de manipuler l'arborescence DOM, de gérer les événements, de développer des animations et d'ajouter une interaction avec la technique AJAX aux pages Web.
Depuis la version 1.7 de jQuery nous avons la méthode on(), qui nous offre toutes les fonctionnalités nécessaires pour gérer les événements. Grâce à cette méthode, nous n'avons plus besoin de l'ancien bind (), live () ou délégué (), mais nous n'avons pas non plus besoin de blur (), focus (), click (), hover () et autres.
Tout comme il y a on (), nous avons son contraire, off (), qui supprime les événements assignés avec on ().
Nous allons voir une série d'exemples pour mieux comprendre la méthode on().
Supposons que nous voulions exécuter une fonction lorsqu'un bouton est cliqué :

 (fonction () {$ ('bouton'). clic (fonction () {// code à exécuter});}) ();

C'est comme si nous le ferions traditionnellement avec click(). Mais si nous regardons le code jQuery, nous verrons que ce qui se passe réellement, c'est que la méthode on () est appelée, donc la chose la plus rapide est de faire :

 (fonction () {$ ('bouton'). on ('clic', fonction () {// code à exécuter});}) ();

C'est l'itinéraire le plus direct. Et la même chose pour d'autres méthodes telles que change (), hover (), mouseenter (), etc … (en fait hover () ce qu'il fait est d'appeler mouseenter () et mouseleave () qui à leur tour appellent la méthode on ()
Regardons jQuery. Si nous téléchargeons la version 1.7 ou supérieure et regardons son code, nous verrons ce qui suit :

 jQuery.each (("flou focus focusin focusout charger redimensionner défilement décharger clic dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu"). split (""), f fonction (i, name) {// Gérer la liaison d'événement jQuery.fn [nom] = fonction (données, fn) {if (fn == null) {fn = données; données = null;} return arguments.length -> 0? This.on (nom, null, data, fn): this.trigger (nom);};

À partir de là, nous sommes seulement intéressés à voir que les méthodes "flou, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, soumettre, keydown, keypress, keyup, error et contextmenu "à la fin tout se termine dans" this.on (nom, null, données, fn) ".
lier (), vivre () et déléguer ()
Dans le passé, on faisait aussi :

 (function () {$ ('button'). bind ('click', function () {// code à exécuter lorsque le bouton est cliqué});}) ();

Ou si nous voulions que l'événement fonctionne même après avoir ajouté de nouveaux éléments "bouton" au document, nous utiliserions la méthode live () :

 (function () {$ ('button'). live ('click', function () {// code à exécuter lorsque le bouton est cliqué});}) ();

Par la suite, jQuery a introduit "delegate()", qui nous a permis d'affecter un événement à un contexte. Par exemple, si le bouton est (ou sera, s'il est ajouté plus tard) à l'intérieur d'un div avec la classe "container":

 (function () {$ ('div.container').delegate ('button', 'click', function () {// code à exécuter lorsque le bouton est cliqué});}) ();

Mais comme pour les précédents, les deux bind (), live () ou délégué () ne font qu'appeler la méthode on ().Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif