Méthode jQuery.on() : comment lier les gestionnaires d’évènements ?

La méthode jQuery.on() propose une syntaxe simplifiée et cohérente pour traiter les évènements ; de ce fait, elle est fréquemment utilisée pour développer des applications Web interactives. Découvrez avec nous sa syntaxe, ainsi que des exemples pratiques sur l’utilisation de cette fonction.

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

La méthode jQuery.on() peut associer des gestionnaires d’évènements à des éléments dans le cadre d’évènements spécifiques. Elle s’utilise dans le domaine du développement Web, notamment pour réagir aux interactions des utilisateurs et pour appeler des fonctions. Avec la méthode jQuery.on(), vous pouvez définir des gestionnaires pour les évènements tels que les clics, les frappes au clavier, les mouvements de souris, les saisies relatives aux formulaires, etc. En outre, la délégation d’évènements vous permet d’associer ces gestionnaires à des éléments, même si ceux-ci ne sont ajoutés qu’au moment de l’exécution ou sont finalement 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érations peuvent être exécutées par la fonction de boucle jQuery.each() au niveau du bloc fonctionnel. De plus, il est très facile d’intégrer les différentes méthodes de traitement des évènements avec jQuery pour WordPress.

À quoi ressemblent la syntaxe et les paramè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 gestionnaire doit réagir (il peut s’agir d’un clic, d’une saisie sur le clavier, d’une validation, etc.) ;
• childSelector : un élément facultatif, sélecteur CSS qui indique les éléments subordonnés devant déclencher l’évènement ;
• data : les données supplémentaires facultatives, qu’il convient de transmettre au gestionnaire d’évènements ;
• function : la fonction exécutée au moment où l’évènement est déclenché ;
• map : la fonction permettant de lier plusieurs évènements et leurs gestionnaires à l’aide d’un seul appel, en utilisant le mappage d’objets.

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

Exemple d’application de la méthode jQuery.on()

Pour lier des évènements, vous pouvez utiliser la méthode jQuery.on() Events et exécuter un code spécifique au moment du déclenchement. Ci-dessous, vous pouvez retrouver un exemple de traitement pour un évènement de clic :

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

Dans cet exemple le gestionnaire 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 gestionnaire d’évènements est alors exécutée, et le message « Clic enregistré sur le bouton » apparaît quant à lui dans la console. Vous pouvez aussi utiliser la méthode jQuery.on() pour traiter d’autres évènements, notamment un survol de la souris, une saisie sur le clavier ou une validation, et définir les fonctions correspondant à chaque évènement.