web-dev-qa-db-fra.com

utilisation jquery de bind vs on click

J'ai rencontré plusieurs méthodes pour gérer les événements de clic dans jquery:

lier:

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

cliquez sur:

$('#mydiv').click(function() {
   ...
}

sur:

$('mydiv').on('click', function() {
   ...
}

Deux questions:

  1. Y a-t-il d'autres façons de procéder?
  2. Lequel devrais-je utiliser et pourquoi?

MISE À JOUR:

Comme tout le monde l'a suggéré, j'aurais dû mieux lire les documents et découvrir que je devrais utiliser:

sur () ou cliquez sur (),

qui sont effectivement la même chose.

Cependant, personne n'a expliqué pourquoi la liaison n'est plus recommandée? J'obtiendrai probablement plus de downvotes pour avoir manqué l'évidence quelque part, mais je ne trouve pas de raison à cela dans les documents.

MISE À JOUR2:

'on' a pour effet utile de pouvoir ajouter des gestionnaires d'événements aux éléments créés dynamiquement. par exemple.

$('body').on('click',".myclass",function() {
    alert("Clicked On MyClass element");
});

Ce code ajoute un gestionnaire de clics aux éléments avec une classe "myClass". Cependant, si plus d'éléments myClass sont ensuite ajoutés dynamiquement plus tard, ils obtiennent également automatiquement le gestionnaire de clics, sans avoir à appeler explicitement "on". D'après ce que je comprends des gens, c'est aussi plus efficace (voir la réponse de Simons ci-dessous).

javascriptjqueryonclick
50
SteveP

À partir de la documentation de bind et click:

lier :

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.

La source indique clairement qu'il n'y a aucune raison d'utiliser bind, car cette fonction n'appelle que la fonction on plus flexible sans même être plus courte:

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

Je suggère donc, tout comme l'équipe jQuery, d'oublier l'ancienne fonction bind, qui est maintenant inutile. Ce n'est que pour la compatibilité avec le code plus ancien qu'il est toujours là.

cliquez :

Cette méthode est un raccourci pour .on ("clic", gestionnaire)

Ce raccourci est bien sûr moins puissant et flexible que la fonction on et ne permet pas la délégation, mais il vous permet d'écrire un code plus court et, sans doute, légèrement plus lisible lorsqu'il s'applique. Les opinions divergent sur ce point: certains développeurs estiment qu'il convient de l'éviter car il ne s'agit que d'un raccourci, et il y a aussi le fait que vous devez le remplacer par on dès que vous utilisez la délégation, alors pourquoi ne pas directement utiliser on pour être plus cohérent?

37
Denys Séguret

À votre première question: il y a aussi .delegate, Qui a été remplacé par .on À partir de jQuery 1.7, mais est toujours une forme valide de gestionnaires d'événements de liaison.

À votre deuxième question: vous devez toujours utiliser .on Comme le disent les documents, mais vous devez également faire attention à la façon d'utiliser .on, Car vous pouvez soit lier le gestionnaire d'événements sur un objet lui-même, soit un élément de niveau supérieur et le déléguer comme avec .delegate.

Supposons que vous ayez une liste ul > li Et que vous souhaitiez lier un événement de survol de souris aux lis. Maintenant, il y a deux façons:

  • $('ul li').on('mouseover', function() {});
  • $('ul').on('mouseover', 'li', function() {});

Le second est préférable, car avec celui-ci, le gestionnaire d'événements est lié à l'élément ul une fois et jQuery obtiendra l'élément cible réel via event.currentTarget ( API jQuery ), tandis que dans le premier exemple, vous le liez à chaque élément de la liste. Cette solution fonctionnerait également pour les éléments de liste qui sont ajoutés au DOM pendant l'exécution.

Cela ne fonctionne pas uniquement pour les éléments parent > child. Si vous avez un gestionnaire de clics pour chaque ancre sur la page, vous devriez plutôt utiliser $(document.body).on('click', 'a', function() {}); au lieu de simplement $('a').on('click', function() {}); pour gagner beaucoup de temps à attacher des gestionnaires d'événements à chaque élément.

14
Simon

Je pense que vous auriez dû chercher dans jquery docs avant de poster cette question:

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.

5
gion_13