Méthode jQuery.on() : comment lier les ges­tion­naires d’évè­ne­ments ?

La méthode jQuery.on() propose une syntaxe sim­pli­fiée et cohérente pour traiter les évè­ne­ments ; de ce fait, elle est fré­quem­ment utilisée pour dé­ve­lop­per des ap­pli­ca­tions Web in­te­rac­tives. Découvrez avec nous sa syntaxe, ainsi que des exemples pratiques sur l’uti­li­sa­tion de cette fonction.

Méthode jQuery.on() : de quoi s’agit-il ?

La méthode jQuery.on() peut associer des ges­tion­naires d’évè­ne­ments à des éléments dans le cadre d’évè­ne­ments spé­ci­fiques. Elle s’utilise dans le domaine du dé­ve­lop­pe­ment Web, notamment pour réagir aux in­te­rac­tions des uti­li­sa­teurs et pour appeler des fonctions. Avec la méthode jQuery.on(), vous pouvez définir des ges­tion­naires pour les évè­ne­ments tels que les clics, les frappes au clavier, les mou­ve­ments de souris, les saisies relatives aux for­mu­laires, etc. En outre, la dé­lé­ga­tion d’évè­ne­ments vous permet d’associer ces ges­tion­naires à des éléments, même si ceux-ci ne sont ajoutés qu’au moment de l’exécution ou sont fi­na­le­ment supprimés. Pour l’évènement, le code à exécuter pourrait par exemple concerner l’ajout d’une classe, à l’aide de la méthode jQuery.addClass(). De la même manière, il est possible de localiser des éléments grâce à la méthode jQuery.find(). Les ité­ra­tions peuvent être exécutées par la fonction de boucle jQuery.each() au niveau du bloc fonc­tion­nel. De plus, il est très facile d’intégrer les dif­fé­rentes méthodes de trai­te­ment des évè­ne­ments avec jQuery pour WordPress.

À quoi res­semblent la syntaxe et les pa­ra­mètres de la méthode jQuery.on() ?

La syntaxe concrète de la méthode jQuery.on() ressemble à ce qui suit :

$(selector).on(event, childSelector, data, function, map)

• event : le nom de l’évènement auquel le ges­tion­naire doit réagir (il peut s’agir d’un clic, d’une saisie sur le clavier, d’une va­li­da­tion, etc.) ;
• child­Se­lec­tor : un élément fa­cul­ta­tif, sélecteur CSS qui indique les éléments su­bor­don­nés devant dé­clen­cher l’évènement ;
• data : les données sup­plé­men­taires fa­cul­ta­tives, qu’il convient de trans­mettre au ges­tion­naire d’évè­ne­ments ;
• function : la fonction exécutée au moment où l’évènement est déclenché ;
• map : la fonction per­met­tant de lier plusieurs évè­ne­ments et leurs ges­tion­naires à l’aide d’un seul appel, en utilisant le mappage d’objets.

Vous souhaitez en savoir plus sur l’or­tho­graphe de cette méthode et ses fonctions ? Consultez notre article faisant office de tutoriel jQuery.

Exemple d’ap­pli­ca­tion de la méthode jQuery.on()

Pour lier des évè­ne­ments, vous pouvez utiliser la méthode jQuery.on() Events et exécuter un code spé­ci­fique au moment du dé­clen­che­ment. Ci-dessous, vous pouvez retrouver un exemple de trai­te­ment pour un évènement de clic :

$('#myButton').on('click ', function() {
    console.log('Clic enregistré sur le bouton');
});

Dans cet exemple le ges­tion­naire pour l’évènement de clic est relié à l’élément de bouton à l’aide de l’ID myButton. Si vous cliquez sur le bouton en question, la fonction du ges­tion­naire d’évè­ne­ments est alors exécutée, et le message « Clic en­re­gis­tré sur le bouton » apparaît quant à lui dans la console. Vous pouvez aussi utiliser la méthode jQuery.on() pour traiter d’autres évè­ne­ments, notamment un survol de la souris, une saisie sur le clavier ou une va­li­da­tion, et définir les fonctions cor­res­pon­dant à chaque évènement.