NuxBSD: Free Infos

Retour d'un niveau
Retour à l'accueil

Un évènement est une action remplie par le navigateur, ou plus généralement par l'utilisateur.
Pour les évènements, c'est un peu le même principe : on lance un bout de code quand une action est remplie.
On peut dire qu'un évènement fait le lien entre une action remplie, et une fonction (du code) exécutée.

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.

• 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.

Exemple pour récupérer une touche qui a été pressée :

$(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
    }
});

Code clavier

Les éléments de formulaire possèdent eux aussi leur lot d'évènements associés.
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.

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

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
 
});

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é.

Rappelez-vous la méthode que vous utilisiez pour écouter un évènement en JavaScript. 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 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.
Nous utiliserons la seconde méthode on() .

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 !

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(){ // après l'événement un fonction de callback est lancée
    alert('Ce code fonctionne !');
});

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.

L'avantage 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 !');
});

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, auquel vous attachez une fonction de retour à chaque fois.
Exemple avec deux événements click et mouseup :

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

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 !

Avant la version 1.7 du framework, il était très courant (et ça l'est encore aujourd’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 :

1. le type d'évènement ;
2. l'élément sur lequel on veut faire une délégation ;
3. et la fonction de retour.

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

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.

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

La fonction inverse de live(), avant de passer à off(), se nommait die().
De même que pour sa sœur, 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

Retour d'un niveau
Retour à l'accueil