Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

GESTION AVANCEE DES EVENEMENTS EN JQUERY

Gérer les évènements avec la méthode jQuery on()

Dans les parties précédentes, nous avons utilisé des méthodes jQuery portant le nom d’évènements, comme la méthode click() par exemple.

Toutes ces méthodes de type « évènement » sont en fait des notations raccourcies de la méthode jQuery on(), qui va nous permettre de gérer tous les évènements.

A noter que depuis la version 1.7 de jQuery, la documentation officielle recommande d’utiliser on() plutôt que les notations raccourcies.

La méthode on() va prendre en arguments le nom d’un évènement et une fonction a exécuter en cas de déclenchement de l’évènement passé en premier argument.

Voici un premier exemple d’utilisation de on(), dans lequel on cherche à attacher un évènement click à nos paragraphes :

Utilisation de la méthode jQuery on()

Essayer ce code

Dans cet exemple, l’intérêt d'utiliser on() est limité : on aurait aussi bien pu utiliser la méthode click() directement.

Il va être beaucoup plus intéressant d’utiliser cette méthode dans le cas on l’on souhaite attacher plusieurs évènements avec une seule fonction à un même élément ou si l’on souhaite attacher différents évènements avec plusieurs fonctions à un élément.

En effet, dans ces cas, la méthode on() nous offre une écriture très simple et condensée et beaucoup plus lisible qu’en utilisant les notations raccourcies.

Pour attacher plusieurs évènements avec une même fonction gestionnaire à un même élément, il suffit de les mentionner à la suite en premier argument de la méthode on() comme ceci :

On utilise la méthode on() pour attacher plusieurs évènements à un élément

Essayer ce code

Ici, on gère très simplement les évènements mouseenter et mouseleave.

Pour maintenant attacher plusieurs évènements possédant chacun une fonction gestionnaire propre à un même élément, nous allons devoir utiliser une syntaxe un peu différente :

On utilise la méthode on() pour attacher plusieurs évènements avec plusieurs gestionnaires à un élément

Essayer ce code

Comme vous le voyez, nous mentionnons un deux points : entre chaque évènement et son gestionnaire, et nous séparons les différents évènements par une virgule.

Gérer le déclenchement des évènements

Le jQuery met à notre disposition les méthodes trigger() et triggerHandler() qui vont nous permettre de forcer le déclenchement d’un évènement.

Ces deux méthodes vont prendre en argument le nom d’un évènement. On peut également leur passer d'autres arguments, optionnels.

Il existe quelques différences entre trigger() et triggerHandler() qui peuvent s’avérer d’importance. Entre autres, retenez que la méthode trigger() va déclencher l’évènement spécifié en argument ainsi que le comportement par défaut de l’évènement (comme la prise de focus dans le cas de l’évènement focus par exemple) tandis que triggerHandler() ne va pas déclencher le comportement par défaut de l’évènement.

De plus, trigger() va être exécutée pour tous les éléments possédant les caractéristiques ciblées tandis que triggerHandler() ne va s'exécuter que pour le premier élément ciblé rencontré.

Voici comment nous allons utiliser ces deux méthodes en pratique :

On force le déclenchement d’évènements en jQuery avec trigger() et triggerHandler()

Essayer ce code

Ici, on force le déclenchement de l’évènement focus sur notre élément input lorsque l’on clique sur l’un des deux boutons. Le gestionnaire d’évènement relatif à l’évènement focus est alors exécuté.

On peut alors observer la différence entre trigger() et triggerHandler() : si l’on clique sur le bouton qui possède trigger(), le comportement par défaut de l’évènement focus (c’est-à-dire donner le focus à un élément) s’exécute également, ce qui n’est pas le cas lorsque l’on clique sur le bouton auquel est accroché triggerHandler().

Supprimer un gestionnaire 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().

Cette méthode remplace deux anciennes méthodes jQuery : unbind() et undelegate() dont l’utilisation n’est plus recommandée depuis la version 1.7 de jQuery.

On peut utiliser la méthode off() avec ou sans argument.

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().

Voyons immédiatement un exemple pratique d’utilisation de la méthode off() :

On utilise la méthode off() pour désactiver un évènement

Essayer ce code

Ici, on attache un évènement de type click à notre élément HTML button id='b1' via un autre bouton button id='b2' : dès qu’un utilisateur clique sur b2, l’évènement et son gestionnaire sont attachés à b1.

On laisse également la possibilité à l’utilisateur de supprimer le gestionnaire d’évènement créé pour b1 en utilisant la méthode off() via un troisième bouton b3.

Ainsi, lorsqu’un utilisateur clique sur b3, la méthode off() est exécutée et supprime le gestionnaire d’évènement click attaché à b1.

Connaitre le type d’évènement déclenché avec la propriété type

Parfois, il peut être intéressant de récupérer le type d’évènement qui a été déclenché afin de pouvoir, par exemple, le désactiver.

Pour connaître le type d’évènement déclenché, nous allons simplement utiliser la propriété type de l’objet Event.

Regardons un exemple ensemble afin de bien comprendre comment utiliser cette propriété.

On utilise la propriété type de l’objet event pour connaître le type de l’évènement déclenché

Essayer ce code

Dans l’exemple ci-dessus, on commence par attacher différents évènements à nos éléments p.

Dans la fonction gestionnaire d’évènements, on passe une référence de l’objet Event qu’on réutilise ensuite pour afficher le type de l’évènement déclenché dans notre élément span.

Chapitre précédent

Chapitre suivant