jquery utilisation de bind vs on click

Question

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

lier :

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

cliquez :

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

sur :

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

Deux questions :

1. Existe-t-il d'autres moyens de procéder ?
2. Lequel dois-je utiliser, et pourquoi ?

UPDATE :

Comme tout le monde l'a suggéré, j'aurais dû mieux lire la documentation, et découvrir que je devais utiliser.. :

on() ou click(),

qui sont effectivement la même chose.

Cependant, personne n'a expliqué pourquoi le bind n'est plus recommandé ? Je vais probablement recevoir d'autres votes négatifs pour avoir manqué l'évidence quelque part, mais je ne trouve pas de raison à cela dans les documents.

UPDATE2 :

L'option "on" permet d'ajouter des gestionnaires d'événements à des éléments créés de manière dynamique.

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

Ce code ajoute un gestionnaire de clics aux éléments dont la classe est 'myClass'. Cependant, si d'autres éléments myClass sont ajoutés dynamiquement par la suite, ils obtiennent automatiquement le gestionnaire de clics, sans avoir à appeler explicitement 'on'. D'après ce que je comprends, cette méthode est également plus efficace (voir la réponse de Simon ci-dessous).

Answer 1

D'après la documentation de bind y click :

lier :

Depuis la version 1.7 de jQuery, la méthode .on() est la méthode préférée pour les éléments suivants 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 plus flexible on sans même être plus courte :

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

Je suggérerais donc, tout comme l'équipe de jQuery, d'oublier l'ancien bind qui est maintenant inutile. C'est uniquement pour des raisons de compatibilité avec un code plus ancien qu'elle est encore là.

cliquez sur :

Cette méthode est un raccourci pour .on('click', handler)

Ce raccourci est bien sûr moins puissant et moins souple que la fonction on et ne permet pas la délégation, mais elle vous permet d'écrire un code plus court et, sans doute, légèrement plus lisible, lorsqu'elle s'applique. Les avis divergent sur ce point : certains développeurs affirment qu'il faut 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 utiliser directement on pour être plus cohérent ?

Answer 2

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

Pour votre deuxième question : Vous devez toujours utiliser .on comme le dit la documentation, mais vous devez également prêter attention à la manière d'utiliser .on car vous pouvez soit lier le gestionnaire d'événements à un objet lui-même, soit à un élément de niveau supérieur et le déléguer, comme dans l'exemple suivant .delegate .

Disons que vous avez un ul > li et que vous souhaitez lier un événement de survol de la souris à l'icône li s. Maintenant, il y a deux façons :

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

La seconde est préférable, car avec celle-ci, le gestionnaire d'événement est lié à l'élément ul une seule fois et jQuery obtiendra l'élément cible réel via event.currentTarget ( API jQuery ), alors 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 seulement pour parent > child éléments. Si vous avez un gestionnaire de clic 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 en attachant des gestionnaires d'événements à chaque élément.

Answer 3

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

Depuis la version 1.7 de jQuery, la méthode .on() est la méthode préférée pour attacher des gestionnaires d'événements à un document.