jQuery liaison cliquez sur les meilleures pratiques d'événements
Dernièrement lors de la liaison des événements de clic en jQuery je trouve me suis posé la question de savoir si l'utilisation du jQuery raccourci click()
ou si je dois spécifier le .on('click', ...)
m'appeler.
La .cliquez sur(). fonction jQuery est juste un raccourci. Pour moi, il est logique de l'utiliser parce que jQuery se charge de tout, derrière les coulisses de la comptabilité pour la méthode privilégiée par la version de jQuery utilisé. Lorsque j'ai mis à jour mes scripts jQuery 1.6 -> 1.7 je sais que tous mes click()
s est passé d'un raccourci vers bind()
à l' on()
méthode. Cela, seul, semble une raison suffisante pour utiliser les raccourcis.
...mais....
Trevor Burnham, que j'ai beaucoup de respect, dit dans son eBook Asynchrone En Javascript qu'il
... préférez(s) à utiliser le plus puissant bind/sur) (au-dessus de la souris)
Qui me confond et je me demandais pourquoi l'utilisation de bind/est sur "plus puissant".
Qu'avez-vous trouvé les meilleures pratiques lors de la liaison d'événements qui ont des raccourcis en jQuery? Utiliser le raccourci ou le faire vous-même?
source d'informationauteur Joel
Vous devez vous connecter pour publier un commentaire.
Je pense que cela a à voir avec la préférence personnelle et de la lisibilité du code, plus que tout.
Autant plus puissante va
.on
vous permet de déléguer des événements, les raccourcis fonctionnent toujours sur l'élément directement. Par exemple$('body').on('click', '.button', function(){});
de travail pour chaque.button
élément, même ceux qui ont été ajoutés après le fait avec ajax ou autre. Alors que le raccourci ne peut pas faire ce$('.button').click(function(){});
est la seule façon d'ajouter un écouteur à.button
et n'a pas de délégation, de sorte.button
éléments ajoutés plus tard, n'auront pas cette liaison.Directe de l'onu-délégué des événements (comme les raccourcis) sur plusieurs éléments est également un peu moins efficaces, alors délégué événements sur un objet parent. Par exemple: disons que il y a 15
.button
éléments sur la page,$('.button').click(...
en boucle par toutes les 15 éléments et ajouter un écouteur d'événement pour chaque; cependant$('#parentElem').on('click', '.button', ...
seront il suffit de l'attacher à un seul écouteur d'événement à#parentElem
que les contrôles sur la cible, donc un attachement et un auditeur, vs une boucle et 15 auditeurs.Et enfin,
.on
a l'avantage de vous permettre d'attacher une fonction à un élément à partir de plusieurs événements, ce qui n'est pas possible avec les raccourcis clavier, par exemple:$('.button').on('click mouseover keyup', ...
la fonction de déclencheur cliquez sur, passage de la souris ou keyup!Permet encore de dire il y a 15
.button
éléments dans un div appelé#parent
Raccourci gestionnaire:
.button
éléments ajoutés à la scène neturnRed
.on
gestionnaire:.button
éléments à ajouter à la scène en faitturnRed
Ici
.on
a clairement l'avantageSi votre situation est plus simple que cela, alors l'avantage de
.on
ne peut faire une différence pour vous, et le raccourci peut-être préféré que sa soit plus lisible.$('#button').click(...
est presque identique à$('#button').on('click', ...
(voir @Fabrício Matté la réponse) et si nous voulons simplement d'ajouter un écouteur pour un même événement, le.on
s'est un point discutable.Personnellement parce qu'il y a des fois quand je veux l'avantage de
.on
j'ai toujours utiliser.on
juste pour être cohérent.Vous pouvez prendre un coup d'oeil rapide à la source et de voir par vous-même ce que votre appel de fonction dans la réalité.
À l'intérieur de jQuery objets
extend
(ligne 3754), jQuery itère sur tous ces noms de méthode à la ligne 3909:De la création de la sténographie de méthodes qui appellent le
.on
méthode pour la méthode donnée sans passer par un sélecteur d'attribut lorsque ces méthodes sont invoquées (ligne 3921):Ce qui signifie simplement qu'il a aucun cas, la délégation effet.
La seule différence entre un appel
Et
Est que la méthode abrégée a la surcharge d'un autre appel de fonction (ce qui est tout à fait minime).
Mise à jour: Lors de la prise d'une version personnalisée de jQuery avec Grunt, l'abréviation méthodes peuvent être exclus avec la
custom:-event-alias
paramètre pour un encore plus petit build (Docs ici). Bien que, personnellement, j'ai tendance à coller avec le CDN construit.Comme pour combien de cas de délégation qui fonctionne et quand il est préférable de vérifier les docs et @Fresheyeball réponse.