Gestion avancée des événements avec jQuery on(), off() et l’objet Event

Dans cette nouvelle leçon, nous allons étudier en détail le fonctionnement de la méthode on() et apprendre à l’utiliser pour attacher plusieurs gestionnaires d’événements à un même élément.

Nous verrons également comment gérer le déclenchement des événements avec les méthodes trigger() et triggerHandler() et comment supprimer un gestionnaire d’événement avec off().

Enfin, nous finirons en présentant quelques propriétés utiles de l’objet event.

 

La méthode jQuery on()

Dans les leçons précédentes, nous avons étudié quelques uns des événements les plus courants et avons vu comment les gérer en utilisant des méthodes portant le nom de ces événements.

Toutes les méthodes vues précédemment qu’on appeler des méthodes de “type” événement sont en fait des notations raccourcies de la méthode jQuery on() qui va nous permettre de prendre en charge n’importe quel type d’événements.

La méthode on() va avoir une syntaxe similaire à la méthode JavaScript addEventListener dans son cas d’utilisation le plus simple puisqu’on va pouvoir lui passer un nom d’événement à gérer en premier argument et une fonction de rappel qui s’exécutera une fois l’événement déclenché en deuxième argument.

See the Pen
Cours jQuery 3.5.1 by Pierre (@pierregiraud)
on CodePen.

Notre méthode on() gère ici des événements de type click. Lorsqu’un utilisateur clique sur un paragraphe, la fonction de rappel passée à on() s’exécute et le paragraphe disparait.

Ce premier cas d’utilisation de on() était très simple. Cependant, c’est dans la gestion de plusieurs événements à la fois que le recours à on() va s’avérer particulièrement intéressant. En effet, cette méthode permet d’attacher plusieurs gestionnaires pour plusieurs événements différents à un même élément, le tout avec une syntaxe relativement condensée et élégante :

See the Pen
Cours jQuery 3.5.2 by Pierre (@pierregiraud)
on CodePen.

Comme vous pouvez le voir, on peut utiliser différentes syntaxes en fonction du nombre de gestionnaires qu’on va enregistrer.

Dans le premier exemple, on attache la même fonction gestionnaire aux deux évènements mouseenter et mouseleave. On passe alors nos deux événements en premier argument de on() puis la fonction de rappel en second argument.

Dans le deuxième exemple, en revanche, chaque événement géré par on() va posséder sa propre fonction de rappel. On utilise alors ici une syntaxe avec des crochets et on passe des couples evenement : fonction-de-rappel en arguments de on().

 

Déclencher un événement avec trigger() et triggerHandler()

Les méthodes jQuery trigger() et triggerHandler() vont nous permettre de déclencher “manuellement” un évènement. On va leur passer en argument le nom de l’événement qu’on souhaite déclencher.

Les différences entre trigger() et triggerHandler() sont les suivantes :

• La méthode triggerHandler(), à la différence de trigger(), va exécuter le gestionnaire d’événement de l’événement déclenché mais ne va pas déclencher l’action par défaut de l’événement. Par exemple, triggerHandler("submit") n’enverra pas le formulaire ;
• trigger() fonctionnera sur tous les éléments possédant les caractéristiques ciblées tandis que triggerHandler() ne’affectera que le premier élément ciblé rencontré ;
• Les évenements déclenchés avec triggerHandler() ne bouillonneront pas ;
• triggerHanlder() ne retourne pas d’objet jQuery mais plutôt la valeur renvoyée par le dernier gestionnaire exécuté.

See the Pen
Cours jQuery 3.5.3 by Pierre (@pierregiraud)
on CodePen.

Comme vous pouvez le constater, triggerHandler() exécute bien le gestionnaire d’événements mais ne déclenche pas l’action par défaut de l’événement qui est de donner le focus à notre input.

 

Supprimer des gestionnaires d’événements avec off()

La méthode jQuery off() va nous permettre de supprimer des gestionnaires d’évènements attachés avec la méthode on(). On va pouvoir l’utiliser sans ou avec des arguments.

En utilisant off() sans lui passer d’argument, on va supprimer tous les gestionnaires d’évènements attachés à un élément.

Pour ne supprimer spécifiquement qu’un gestionnaire d’évènement, on va devoir passer en arguments le nom de l’évènement et les caractéristiques exactes relatives au gestionnaire (namespace, sélecteur, ou encore le nom de la fonction gestionnaire) à la méthode off().

See the Pen
Cours jQuery 3.5.4 by Pierre (@pierregiraud)
on CodePen.

 

Les propriétés de l’objet event

En jQuery, lorsque définit un gestionnaire d’événement, un objet event lui est automatiquement passé.

Cet objet event va posséder des propriétés qui vont pouvoir être intéressantes. Parmi celles-ci, nous avons déjà étudié pageX, pageY et which au cours des leçons précédentes.

Les autres propriétés que je voulais vous présenter sont les propriétés target et type.

La propriété target va nous permettre de connaitre l’élément qui a déclenché l’événement. Sa valeur va pouvoir être l’élément auquel on a attaché le gestionnaire d’événement ou l’un de ses descendants. Cette propriété va s’avérer très utile dans des situations de bouillonnement d’un événement, afin de déterminer quel est l’élément déclencheur.

La propriété type va nous permettre de connaitre le type d’événement déclenché. Cette propriété peut être très utile dans le cas où plusieurs gestionnaires pour plusieurs événements sont accrochés à un même élément.

See the Pen
Cours jQuery 3.5.5 by Pierre (@pierregiraud)
on CodePen.