JQuery : Namespaced Events

Cet article est en grande partie la traduction de la partie Namespaced Event issus du chapitre Events and Event Delegation de jQuery Fundamentals (un site de présentation des principales fonctionnalités de jQuery très bien fait).

Une des bonnes pratiques pour la gestions des événements en jQuery est de passer par on(). Un des avantages de l’utilisation de on() est la possibilité d’utiliser des « namespaced » events. Quand utiliser ces namespaces ?
Prenons un exemple on l’on doit s’abonner à des événements pour ensuite supprimer certains de ces handlers. La première chose qui nous vient en tête est de faire :

A NE PAS UTILISER !

$( 'li' ).on( 'click', function() {
  console.log( 'a list item was clicked' );
});
 
$( 'li' ).on( 'click', function() {
  registerClick();
  doSomethingElse();
});
 
$( 'li' ).off( 'click' );

Ce code va permettre de se désabonner à tous les événements clic sur les éléments li, ce qui n’est pas ce que nous voulons. L’utilisation d’un namespaced event va permettre de spécifier un handler spécifiquement.

$( 'li' ).on( 'click.logging', function() {
  console.log( 'a list item was clicked' );
});
 
$( 'li' ).on( 'click.analytics', function() {
  registerClick();
  doSomethingElse();
});
 
$( 'li' ).off( 'click.logging' );

Ce code va garder le handler relatif à analytics, et supprimer le handler relatif au logging.

On peut également utiliser les namespaces pour déclencher certains événements :

$( 'li' ).trigger( 'click.logging' );

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *