Comment traduire ses gestionnaires d’évènements avec le nouveau .on()

Attention ! Mise à jour du .on() avec jQuery 1.8.1, voir mon article.

Avec l’apparition de jQuery 1.7 qui date déjà du 3 novembre 2011, il est nécessaire de revoir ses gestionnaires d’évènements si l’on souhaite améliorer les performances de nos scripts.

Avant nous avions ceci :

$('#test').click(function() {
   // ... 
});

$('#test').bind('click', function() {
   // ... 
});

Ces 2 codes produisent le même résultat, .click() est un alias de .bind('click'), et cela pour tous les évènements.

Avec le .on() on remplace seulement .bind() par .on() donc jusque là ça va :

$('#test').on('click', function() {
   // ... 
});

Ce qui est intéressant, c’est que le .on() gère également le « comportement » de .live() et de manière intelligente. Le .live() place des écouteurs sur tous les éléments (pas beau), cela permet de capturer les éléments qui sont créés dynamiquement (comprendre non présents au chargement du DOM).

$('#test').live('click', function() {
   // ... 
});

Pour palier ce défaut, le .on() permet le même comportement avec une syntaxe différente :

$(document).on('click', '#test', function() {
   // ... 
});

Le .on() avec 3 arguments est le nouveau .live().
Attention, votre sélecteur sera le deuxième argument, en revanche l’élément ciblé par le .on() devra être (pour davantage de performance) le sélecteur parent le plus proche de votre élément ciblé (#test).
Ici comme je n’ai pas mis d’exemple concret, je mets le parent le plus « lointain », à savoir document.

Maintenant si vous souhaitez gérer plusieurs évènements sur le même élément et dont le comportement doit être différent pour chacun, avant on avait :

$('#test').bind({
    click: function() {
        // ...
    },
    mouseenter: function() {
        // ...
    }
});

$('#test').click(function() {
    // ...
}).mouseenter(function() {
    // ...
});

Et avec .on(), on a la même chose, toujours pareil en remplaçant .bind() par .on().

Si l’on souhaite un comportement de « type » .live() avec plusieurs évènements, notre .on() devient :

$(document).on({
    click: function() {
        // ...
    },
    mouseenter: function() {
        // ...
    }
}, '#test');

Voilà c’était une petite mise au point qui peut être utile pour certains.

Je ne vous ai pas parlé de .delegate() car quasiment mort-né. Maintenant il faut espérer que dans les versions ultérieures de jQuery, les alias qui aujourd’hui appellent .bind(), appellerons demain .on().

A bientôt ! ;)

Vous aimerez aussi...

4 réponses

  1. MatTheCat dit :

    Très bonne clarification, simple et efficace !

  1. 19 février, 2012

    […] Pour palier ce problème de performance, la version de 1.7 a fait apparaître une nouvelle méthode, .on() ! J’ai d’ailleurs consacré un article entier à ce sujet. […]

  2. 29 février, 2012

    […] A noter que j’utilise la méthode .on() apparue avec jQuery 1.7, si vous voulez en savoir plus j’ai fait un article sur « Comment traduire ses gestionnaires d’évènements avec le nouveau .on() ». […]

  3. 15 novembre, 2012

    […] Depuis jQuery 1.8.1, une petite subtilité est venue se greffer au gestionnaire d’événements .on(), j’avais d’ailleurs rédigé un article vous expliquant comment l’utiliser. […]

Laisser un commentaire

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

Image CAPTCHA

*