web-dev-qa-db-fra.com

jQuery’s .bind () vs. .on ()

J'ai trouvé deux excellents articles sur la nouvelle fonction .on(): jquery4u.com , elijahmanor.com .

Existe-t-il un moyen d'utiliser encore mieux la .bind() que .on()?

Par exemple, j'ai un exemple de code ressemblant à ceci:

$("#container").click( function( e ) {} )

Vous pouvez noter que je n'ai qu'un élément récupéré par le sélecteur et dans mon cas, le <div> nommé #container existe déjà lorsque ma page a été chargée; pas ajouté dynamiquement. Il est important de mentionner que j’utilise la dernière version de jQuery: 1.7.2.

Pour cet exemple, utilisez .on() au lieu de .bind() même si je n’utilise pas les autres fonctions fournies par la fonction .on()?

javascriptjqueryjquery-selectors
197
Samuel

En interne, .bind mappe directement à .on dans la version actuelle de jQuery. (Il en va de même pour .live.) Il y a donc un impact minime mais pratiquement insignifiant sur les performances si vous utilisez .bind à la place.

Cependant, .bind peut être supprimé des versions futures à tout moment. Il n'y a aucune raison de continuer à utiliser .bind et toutes les raisons de préférer .on à la place.

303
Blazemonger

Ces extraits ont tous exactement la même chose:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

Cependant, ils sont très différents de ceux-ci, qui effectuent tous la même chose:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

Le second ensemble de gestionnaires d’événements utilise délégation d’événements et fonctionnera pour les éléments ajoutés dynamiquement. Les gestionnaires d’événements utilisant la délégation sont également beaucoup plus performants. Le premier jeu ne fonctionnera pas pour les éléments ajoutés de manière dynamique et leur performance est bien pire.

la fonction on() de jQuery n'introduit aucune nouvelle fonctionnalité qui n'existait pas, il s'agit simplement d'une tentative de standardisation de la gestion des événements dans jQuery (vous n'avez plus à choisir entre direct, liaison ou délégué).

54
jbabey

Les méthodes directes et .delegate sont des API supérieures à .on et il n'y a aucune intention de les déconseiller.

Les méthodes directes sont préférables car votre code sera typé de manière moins stricte. Vous obtiendrez une erreur immédiate lorsque vous saisirez un nom d'événement plutôt qu'un bogue silencieux. À mon avis, il est également plus facile d'écrire et de lire click que on("click"

Le .delegate est supérieur à .on en raison de l'ordre de l'argument:

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

Vous savez tout de suite que c'est délégué parce que, bon, ça dit délégué. Vous voyez aussi instantanément le sélecteur.

Avec .on, il n'est pas clair si c'est délégué et vous devez regarder à la fin du sélecteur:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

Désormais, la dénomination de .bind est vraiment terrible et pire que .on. Mais .delegate ne peut pas créer d’événements non délégués et il existe des événements qui n’ont pas de méthode directe. Ainsi, dans de rares cas, cela pourrait être utilisé, mais uniquement parce que vous souhaitez faire une distinction nette entre les éléments délégué et non autorisé. événements délégués.

11
Esailija

Si vous regardez dans le code source pour $.fn.bind, vous constaterez qu'il ne s'agit que d'une fonction de réécriture pour on:

function (types, data, fn) {
    return this.on(types, null, data, fn);
}

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

8
andlrc

A partir de la documentation jQuery:

Depuis jQuery 1.7, la méthode .on () est la méthode recommandée pour attacher des gestionnaires d'événements à un document. Pour les versions antérieures, la méthode .bind () est utilisée pour attacher un gestionnaire d'événements directement aux éléments. Les gestionnaires étant attachés aux éléments actuellement sélectionnés dans l'objet jQuery, ils doivent donc exister au moment où l'appel à .bind () se produit. Pour une liaison d'événement plus flexible, voir la discussion sur la délégation d'événements dans .on () ou .delegate ().

http://api.jquery.com/bind/

6
Faust

À partir de Jquery 3.0 et supérieur, .bind est obsolète et ils préfèrent utiliser .on à la place. Comme @Blazemonger a répondu plus tôt, il peut être supprimé et il est certain qu'il sera supprimé. Pour les versions plus anciennes, .bind appellerait également .on en interne et il n'y aurait aucune différence entre elles. S'il vous plaît voir également l'API pour plus de détails.

Documentation de l'API jQuery pour .bind ()

3
userG