.bind () contre .on () de jQuery

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

Existe-t-il un moyen où l' .bind()alambic est préférable d'utiliser que .on()?

Par exemple, j'ai un exemple de code qui ressemble à 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>nom #containerexiste 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, devrait .on()être utilisé au lieu de .bind()même si je n'utilise pas les autres fonctionnalités fournies par la .on()fonction?

En interne, .bindcorrespond directement à .ondans la version actuelle de jQuery. (Il en va de même pour .live.) Il y a donc un impact sur les performances minuscule mais pratiquement insignifiant si vous utilisez à la .bindplace.

Cependant, .bindpeut être supprimé des futures versions à tout moment. Il n'y a aucune raison de continuer à utiliser .bindet toutes les raisons de préférer à la .onplace.

Ces extraits effectuent 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 deuxième ensemble de gestionnaires d'événements utilise la délégation d'événements et fonctionnera pour les éléments ajoutés dynamiquement. Les gestionnaires d'événements qui utilisent la délégation sont également beaucoup plus performants. Le premier ensemble ne fonctionnera pas pour les éléments ajoutés dynamiquement et sont bien pires pour les performances.

La on()fonction de jQuery n'introduit aucune nouvelle fonctionnalité qui n'existait pas déjà, c'est juste une tentative de standardiser la gestion des événements dans jQuery (vous n'avez plus à choisir entre vivre, lier ou déléguer).

Les méthodes directes .delegatesont des API supérieures .onet il n'est pas prévu de les déprécier.

Les méthodes directes sont préférables car votre code sera moins typé en chaîne. Vous obtiendrez une erreur immédiate lorsque vous tapez mal un nom d'événement plutôt qu'un bug silencieux. À mon avis, il est également plus facile d'écrire et de lire clickqueon("click"

Le .delegateest supérieur à en .onraison 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, eh bien, ça dit délégué. Vous voyez également instantanément le sélecteur.

Avec .once n'est pas immédiatement clair si c'est même délégué et vous devez regarder à la fin pour le sélecteur:

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

Maintenant, la dénomination de .bindest vraiment terrible et est à première vue pire que .on. Mais .delegatene peut pas faire d'événements non délégués et il y a des événements qui n'ont pas de méthode directe, donc dans un cas rare comme celui-ci, cela pourrait être utilisé mais uniquement parce que vous voulez faire une séparation nette entre les événements délégués et non délégués.

Si vous regardez dans le code source, $.fn.bindvous constaterez que ce n'est qu'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

De la documentation jQuery:

Depuis jQuery 1.7, la méthode .on () est la méthode préféré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 sont attachés aux éléments actuellement sélectionnés dans l'objet jQuery, donc ces éléments doivent exister au moment où l'appel à .bind () se produit. Pour une liaison d'événement plus flexible, consultez la discussion sur la délégation d'événement dans .on () ou .delegate ().

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

Depuis Jquery 3.0 et supérieur, .bind est obsolète et préfère utiliser .on à la place. Comme @Blazemonger a répondu plus tôt, il peut être supprimé et c'est sûr qu'il le sera. Pour les anciennes versions, .bind appellerait également .on en interne et il n'y a aucune différence entre eux. Veuillez également consulter l'API pour plus de détails.

Documentation de l'API jQuery pour .bind ()