Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

INTRODUCTION A LA GESTION DES EVENEMENTS EN JQUERY

Rappels sur les évènements

Un évènement correspond à un moment précis où une action se produit.

L’action peut venir de l’utilisateur, dans le cas par exemple d’un clic sur un élément de la page ou encore du navigateur comme c’est le cas lors du chargement d’une page.

En JavaScript, nous allons pouvoir exécuter du code et effectuer des actions lors de ces évènements en créant des gestionnaires d’évènements.

Le JavaScript met notamment à notre disposition la méthode addEventListener() qui nous permet de réagir à l’évènement de notre choix.

Un gestionnaire d’évènements est constitué de deux choses : du nom de l’évènement qu’il doit gérer et généralement d’une fonction à exécuter lors du déclenchement de l’évènement.

On se rappelle également que certains évènements se propagent, et qu’ils partent tous de la racine du DOM, c’est-à-dire de l’élément HTML pour descendre dans le DOM en traversant les différents éléments.

Une fois que l’évènement a touché l’élément le plus profond du DOM, il va faire le chemin inverse et remonter jusqu’à la racine et etc.

Ces phases de descente et de remontée des évènements s’appellent les phases de capture et de bouillonnement.

En JavaScript, grâce à la méthode addEventListener(), on va pouvoir choisir « d’écouter » ou de réagir à un évènement durant une phase ou une autre.

La gestion d'évènements en jQuery

Le jQuery va simplifier et rendre encore plus puissante la gestion d'évènements en mettant à notre disposition différentes méthodes prêtes à l’emploi.

Ces méthodes vont tout simplement généralement porter le nom des évènements auxquels on souhaite réagir, comme par exemple la méthode click() qui va nous permettre de gérer l’évènement click.

Premier exemple de gestion d'un évènement en jQuery : l’évènement click

En jQuery, nous allons utiliser la méthode click() pour gérer les évènements de type click.

On va déjà pouvoir appliquer click() sans argument sur un objet jquery faisant référence à un élément pour réceptionner un évènement. Voici comment on va s’y prendre pour par exemple réceptionner un évènement click sur les paragraphes de notre page :

On attache un évènement click à nos paragraphes

Cependant, l’intérêt d’utiliser click() est de pouvoir exécuter un code lors d’un clic.

Pour cela, nous allons passer une fonction anonyme en argument à notre méthode click(), tout comme on le faisait en JavaScript avec addEventListener().

Cette fonction anonyme contiendra le code à exécuter lors du déclenchement de l’évènement.

Reprenons notre exemple précédent et tentons de cacher un paragraphe lorsqu’un utilisateur clique dessus.

Gestion d’un évènement click en jQuery

Essayer ce code !

Dans l’exemple précédent, nous avons passé une fonction anonyme à notre méthode click(). Lorsqu’un paragraphe est cliqué, cette fonction anonyme est exécutée et donc la fonction hide() qu’elle contient s’exécute également.

Notez dans cet exemple l’utilisation du mot clef this. Ce mot clef nous sert à faire référence à l'objet jQuery (et donc à l'élément HTML) actuellement cliqué. Cela nous permet de ne cacher que le paragraphe qui est cliqué.

Si vous maitrisez suffisamment le JavaScript, vous devriez savoir comment s’utilise this dans ce cas là.

Chapitre précédent

Chapitre suivant