Mis à jour le 14/03/2018
  • 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

jQuery et les événements

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

En jQuery, vous aurez presque tout le temps à travailler avec ce que l'on appelle des évènements, (events en anglais)... Nous allons voir ce que c'est dans ce chapitre. Qui sont-ils ? A quoi vont-ils nous servir, surtout et comment les aborder dans notre code jQuery ?

C'est vraiment un élément clé du framework, donc forcément, c'est un chapitre clé. Bonne nouvelle : c'est plutôt simple à comprendre. :p

Go !

Un évènement, des évènements...

Voyons voir ici ce que sont les évènements... si vous êtes assez à l'aise avec JavaScript, cette sous-partie n'aura probablement pas grand chose à vous apprendre. Mais bien sûr, lisez quand même car vous êtes en train de réapprendre JavaScript à travers jQuery !

C'est quoi un évènement ?

Pour expliquer la chose simplement, dites-vous qu'un évènement est une action remplie par le navigateur, ou plus généralement l'utilisateur. Vous connaissez les conditions ? Pour les évènements, c'est un peu le même principe : on lance un bout de code quand une action est remplie.

D'ailleurs ! Vous vous en êtes peut-être rendu compte, mais dans les chapitres précédents, nous avons déjà utilisé un évènement, le ready() ! Voyons le code que nous avions :

$(document).ready(function(){
    // Le code jQuery ici !
});

C'est la fonction de base de jQuery, vous vous souvenez ? Elle marche autour de l'évènement ready() qui écoute le chargement du document. L'écoute d'un évènement, c'est tout simplement le fait d'attacher une action bien précise à remplir à un élément pour déclencher une fonction, appelée écouteur d'évènement.

"QUAND le document est PRÊT, on appelle une fonction (dans laquelle on va mettre du jQuery)."

C'est le fonctionnement de ce code qui tourne autour de l'évènement ready() : tant que le document n'est pas chargé, on ne fait rien. Quand il est chargé, on agit. Fort heureusement pour nous, jQuery peut écouter plein d'évènements différents, on ne se limitera pas qu'à écouter si notre page est chargée ou non. :D

  • On aura par exemple un évènement qui pourra écouter la souris de l'utilisateur : quand il va cliquer sur un certain élément de votre page que vous aurez ciblé avec un sélecteur, vous pourrez exécuter du code jQuery.

  • Un autre évènement peut écouter le clavier de l'utilisateur : quand il va presser des touches de son clavier, vous pourrez exécuter là encore du code.

En gros, on peut dire qu'un évènement fait le lien entre une action remplie, et une fonction (du code) exécutée.

Encore une fois, si vous êtes un habitué du JavaScript vous deviez connaître un peu tout ça, si ce n'était pas le cas, pas de problème : maintenant vous connaissez le concept. JavaScript permettait de gérer les évènements d'une certaine manière. Eh bien devinez quoi ? En jQuery, c'est totalement différent ! Bon point : en JavaScript, gérer des évènements ne se faisait pas du tout de la même manière d'un navigateur à l'autre. Sachez que jQuery uniformise encore le tout !

La syntaxe en elle-même est super simple, voyons ce que cela donne ici. Utilisons par exemple l'évènement click() qui est un évènement écoutant le clic de la souris.

$("#uneDiv").click(function(){
    // Le code a exécuter !
});

Si on clique sur l'élément qui possède l'id #uneDiv (<div id="uneDiv"></div>), alors vous allez pouvoir déclencher du code JavaScript. Plus tard, lorsque l'on sera un peu plus à l'aise avec jQuery, on pourra par exemple décider de faire disparaître cette div (ou un autre élément !) avec un bel effet, ou même commencer à gérer une requête AJAX pour mettre à jour le contenu de cette div... bref ! Les possibilités sont multiples. :)

Les évènements vous intéressent et vous voulez aller plus loin, alors lisez donc la suite.

Quelques évènements incontournables

jQuery étant très complet il va nous donner l'opportunité d'écouter beaucoup d'évènements sur notre page web. Nous allons en voir quelques uns ici, que nous pensons incontournables.

Déclenchement d'évènements

Parmis les nombreux évènements disponibles, les plus célèbres sont sans aucun doute ceux pouvant être déclenchés par l'utilisateur. Ce sont eux qui permettent une très grande interactivité avec le visiteur, c'est donc eux qui seront les plus utilisés en général. Nous allons en voir quelques uns, ceux qui sont à connaître absolument !

L'écoute sur la souris

La souris d'un ordinateur est un outil qui permet à l'utilisateur de réaliser de multiples actions : cliquer, bouger, double-cliquer, descendre dans une page... Bref, un paquet de mouvements à prendre en compte. Ce qui est génial avec jQuery, c'est que l'on va pouvoir contrôler entièrement les actions du visiteur, et déclencher de multiples fonctions grâce à elles ! :)

Vous connaissez sans doute déjà click(), qui lance une fonction lors du clic de l'utilisateur sur l'objet associé. Nous vous proposons ci-dessous une liste d'évènements adaptés à la souris ; le fonctionnement reste le même.

Action

Fonction

Clic

click()

Double-clic

dblclick()

Passage de la souris

hover()

Rentrer dans un élément

mouseenter()

Quitter un élément

mouseleave()

Presser un bouton de la souris

mousedown()

Relâcher un bouton de la souris

mouseup()

Scroller (utiliser la roulette)

scroll()

L'écoute sur le clavier

Tout comme la souris, le clavier peut tout à fait être écouté par un script jQuery. L'utilisation la plus fréquente que l'on peut en faire est de détecter l'appui d'une touche et de lancer une action seulement si la bonne à été pressée. Les évènements associés ne sont pas très nombreux, on en trouvera seulement trois :

  • keydown(), qui se lance lorsqu'une touche du clavier est enfoncée ;

  • keypress(), qui se lance lorsqu'on maintient une touche enfoncée ;

  • keyup(), qui se lance lorsqu'on relâche une touche préalablement enfoncée.

Pour connaître la touche enfoncée par l'utilisateur, dans chaque cas, il vous faudra employer une fonction anonyme équipée d'un argument représentant le code de la touche, sur lequel on appliquera la propriété keyCode. Cependant, le principal problème de cette propriété est qu'elle ne fonctionne pas sur tous les navigateurs (souvenez-vous que ceux-ci ont des moteurs JavaScript différents). Il faut donc ruser pour rendre notre code compatible tous navigateurs :

$(document).keyup(function(touche){ // on écoute l'évènement keyup()

    var appui = touche.which || touche.keyCode; // le code est compatible tous navigateurs grâce à ces deux propriétés

    if(appui == 13){ // si le code de la touche est égal à 13 (Entrée)
        alert('Vous venez d\'appuyer sur la touche Entrée !'); // on affiche une alerte
    }
});

Pour connaître le code d'une touche, je vous invite à aller consulter cette page.

Le cas des formulaires

Les éléments de formulaire possèdent eux aussi leur lot d'évènements associés. Par exemple, lorsqu'un champ est focalisé, on dit qu'il « prend le focus », car c'est sur lui que se trouve notre pointeur. Un évènement permet de contrôler ce genre de chose.

Action

Fonction

Focalisation

focus()

Sélection (p.e. dans une liste)

select()

Changement de valeur

change()

Envoi du formulaire

submit()

Le déclenchement virtuel

jQuery permet de simuler le déclenchement d'évènements grâce à une simple méthode. Pour faire court, vous n'avez pas besoin d'attendre que l'utilisateur remplisse une action précise pour lancer du code : vous pouvez exécuter virtuellement un évènement grâce à trigger() ! Il suffit de donner le type de l'évènement en tant qu'argument.

$('p').click(function(){
    alert('Cliqué !');
});

$('p').trigger('click'); // déclenche l'action au chargement du script

Annuler le comportement d'un élément par défaut

Chaque évènement possède son propre groupe d'éléments spécifiques à traiter : par exemple, la soumission de formulaire ne s'applique pas à tous les cas. Cependant, certains éléments ont un comportement par défaut, défini par le navigateur. Le cas le plus courant est le lien hypertexte : son comportement va être de rediriger l'utilisateur vers l'adresse donnée.

Une méthode en jQuery permet d'annuler tous comportement par défaut. Il s'agit de preventDefault().

$('a').click(function(e){
    e.preventDefault(); // annule l'action du lien
});

Les gestionnaires d'évènements

En jQuery, et même plus globalement en JavaScript, on peut faire appel aux gestionnaires d'évènements. Ce sont des fonctions auxquelles on donne un type d'évènement à écouter, ainsi qu'une fonction à exécuter à chaque fois que l'évènement est déclenché. Elles sont plusieurs et nous allons les étudier car elles représentent une partie importante de ce chapitre, si ce n'est LA plus importante !

Rappels

Si vous lisez ce cours, c'est que vous avez quand même quelques notions en JavaScript. Dans un premier temps, rappelez-vous la méthode que vous utilisiez pour écouter un évènement. Il devait sans doute s'agir de addEventListener(), qui signifie en français « ajouter un écouteur d'évènement ». Cette fonction prenait le plus souvent deux arguments : le premier indiquait le type d'évènement à écouter, le second était une fonction de retour exécutant du code.

Un troisième paramètre pouvait être défini à true ou false, et permettait d'utiliser soit la phase de capture, soit la phase de bouillonnement.

L'écoute en jQuery

Sachez qu'avec notre framework, il est possible de réaliser la même chose. L'écoute d'un évènement se réalisera avec la méthode bind() le plus souvent, mais la tendance s'inverse pour laisser place à la fonction on(), recommandée par les auteurs de jQuery depuis la version 1.7 : c'est donc très récent. Comme chaque développeur doit s'adapter au progrès, nous utiliserons la seconde méthode dans la suite de ce chapitre, et plus généralement de ce cours !

Quelle différence entre ces deux fonctions ? Pourquoi utiliser l'une, et plus l'autre ?

On note une différence majeure de flexibilité : nous allons voir juste après qu'il est possible de déléguer des évènements, de faire vivre des évènements, et évidemment d'écouter des évènements. Dans les versions plus anciennes de jQuery, il fallait utiliser trois méthodes différentes pour réaliser ces choses-là. La méthode on() permet de les regrouper en une seule, elle est donc bien plus pratique et ergonomique !

Précédemment, vous avez vu comment déclencher un évènement simple. Les fonctions utilisées n'étaient en fait que des méthodes simplifiées, permettant aux développeurs de ne pas créer à chaque fois un gestionnaire. Nous allons voir à présent l'écoute, la vraie, d'évènements en jQuery.

Pour écouter un évènement, il suffit de réaliser le même schéma de code qu'avec addEventListener(). C'est-à-dire que l'on va donner dans un premier temps le type d'évènement, puis la fonction de callback à exécuter :

$('button').on('click', function(){
    alert('Ce code fonctionne !');
});

Concrètement, ce code se lance de cette façon :

  1. on cible un bouton ;

  2. on initialise un gestionnaire d'évènement ;

  3. on écoute le clic de l'utilisateur ;

  4. et on exécute le code de la fonction de retour.

Un des avantages de cette technique est que l'écoute peut se faire sur plusieurs évènements en même temps, vous n'êtes pas obligé de créer un gestionnaire pour chacun d'eux ! Ainsi, nous pouvons lancer une écoute sur le clic et sur le double-clic, en séparant les deux types par un espace :

$('button').on('click dblclick', function(){ // on écoute le clic et le double-clic !
    alert('Ce code fonctionne !');
});
Passer par un objet

Encore plus fort, vous pouvez passer un objet en tant qu'argument à cette méthode, afin d'exécuter des fonctions différentes pour chaque évènement ! Le concept est très simple, il suffit de donner le type d'évènement en tant qu'identifiant, auxquel vous attachez une fonction de retour à chaque fois :

$('button').on({
    click : function(){
        alert('Vous avez cliqué !');
    },
    mouseup : function(){
        alert('Vous avez relâché le clic !');
    }
});

La délégation d'évènements

Ce concept est plutôt simple à comprendre. Il permet en fait de créer un écouteur d'évènements sur un élément, et de s'adapter automatiquement aux éléments similaires créés plus tard, de façon dynamique ! Pour que vous compreniez bien, imaginons que vous ayez un paragraphe simple, sur lequel vous appliquez un évènement. Si vous créez d'autres paragraphes dans la page, ceux-ci ne seront pas pris en compte par l'écouteur !

Image utilisateur

Avant la version 1.7 du framework, il était très courant (et ça l'est encore ajourd'hui) d'utiliser la méthode live(), pour déléguer un évènement à un élément créé dynamiquement. C'est une technique dépréciée, pour la simple et bonne raison qu'elle devient lente sur de grosses pages, et les problèmes de performance sont très mal vus des développeurs. De même, cette méthode parcourt l'ensemble du document, contrairement à on(), qui cible directement un élément ! On a donc une portée restreinte pour une efficacité croissante : double gain de vitesse d'exécution !

La fonction delegate() est presque autant utilisée que live(). La différence entre ces méthodes est que la première fonctionne presque comme on(), et est donc plus propre et ergonomique. Elle n'est pas dépréciée, contrairement à sa cousine, mais encore une fois, vous n'aurez pas à l'utiliser.

La syntaxe pour déléguer un évènement est très simple. Il faut donner trois arguments :

  • le type d'évènement ;

  • l'élément sur lequel on veut faire une délégation ;

  • et la fonction de retour.

$('div').on('click', 'p', function(){
    alert('Les paragraphes créés peuvent être cliqués !');
});

Les espaces de noms

Très utiles, les espaces de noms (namespaces dans la langue de Shakespeare) ont la capacité de désigner un évènement bien précis. Le nommage d'évènement n'étant pas possible avec une fonction, les développeurs de jQuery ont préféré mettre en place ce système. A utiliser avec les gestionnaires d'évènements, les espaces de noms ont une syntaxe bien particulière à retenir :

event.namespace

  • « event » désigne le type d'évènement qui doit subir un espace de nom.

  • Le point permet de faire la jonction avec l'espace de nom.

  • « namespace » désigne le nom.

Grâce un système pareil, vous pourrez exécuter différentes fonctions à partir d'un même type d'évènement. Il suffit de spécifier l'espace de nom à utiliser, et seule la fonction correspondante sera exécutée.

$('button').on('click.nom', function(){
    alert('Premier évènement');
});

$('button').on('click.prenom', function(){
    alert('Second évènement');
});

$('button').trigger('click.nom'); // exécute le clic, MAIS ne lance que la première alerte !

Quatre règles doivent être respectées lorsque vous utilisez les espaces de noms. Il ne faut pas en user n'importe comment, car ils ne sont pas adaptés à chaque cas d'utilisation :

    • il est possible de donner plusieurs espaces de noms à un évènement ;

    • en revanche, il n'est pas possible d'appeler plusieurs espaces de noms d'un seul coup !

    • Exemple : on('click.nom.prenom', ...) définira en même temps click.nom et click.prenom ; mais trigger('click.nom.prenom') ne marchera pas.

    • vous pouvez seulement préciser le type d'évènement, sans les espaces de noms, pour tous les déclencher en même temps ;

    • en revanche, il n'est pas possible de ne préciser qu'un espace de nom sans type d'évènement !

    • Exemple : trigger('click') déclenchera toutes les fonctions associées aux espaces de noms sur le clic ; mais trigger('.nom') ne marchera pas.

La suppression en jQuery

S'il est possible d'écouter un évènement avec on(), il doit être également possible de le supprimer ! Et en effet, la fonction inverse à cette méthode se nomme, de manière plutôt logique, off(). Elle est assez puissante dans le sens où elle peut supprimer tous les gestionnaires et écouteurs mis en place précédemment avec on(), de même qu'on utilisait unbind() pour annuler bind() ! Fort heureusement, ce n'est pas sa seule utilisation : un argument permet notamment de spécifier quel type d'évènement il faut annuler.

$('p').on('click', function(){
    // du code ici
});

$('p').off('click'); // supprime tous les gestionnaires écoutant le clic

$('p').off(); // supprimer tous les gestionnaires de n'importe quel évènement
Annuler la délégation

La fonction inverse de live(), avant de passer à off(), se nommait die(). De même que pour sa soeur, cette méthode est dépréciée, on peut donc dire qu'il est temps pour die() de mourrir ! :lol:
Si vous voulez supprimer tous les gestionnaires d'évènements délégués seulement, il faut donner un second argument à la méthode, qui est l'élément créé dynamiquement. La valeur « ** » désigne tous les éléments qui profitent de la délégation d'évènements :

$('body').on('click', 'p', function(){
    // du code ici
});

$('body').off('click', 'p'); // supprime tous les gestionnaires d'évènements délégués sur les paragraphes

$('body').off('click', '**'); // supprime tous les gestionnaires d'évènements délégués

Vous avez vu, les évènements n'étaient pas difficiles à comprendre, et en plus de ça, c'est plutôt simple d'en exploiter toute la puissance dans notre code jQuery. Peut-être les gestionnaires vous ont-ils donné du fil à retordre ? Si c'est le cas, prenez bien le temps de relire cette petite partie, car ils sont très utilisés !

Les bases du framework se mettent de plus en plus en place dans votre tête, et c'est une très bonne chance. Bientôt vous serez étonnez de ce qu'il est possible de faire avec votre site web ! La prochaine étape : la manipulation de votre code CSS. Modifier des éléments de votre design dynamiquement, un rêve inavoué ? :-°

Exemple de certificat de réussite
Exemple de certificat de réussite