jQuery liaison cliquez sur les meilleures pratiques d'événements

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').click(turnRed);
 $('.button').mouseover(turnRed);
 $('.button').keyup(turnRed);

 function turnRed(){
      $(this).css('color','red');
 }

• 4 jQuery objets créés (oui, je sais que vous pourriez la mettre en cache de 2 objets, mais c'est un exemple)
• 3 élément boucles de 15 à chaque, donc, jQuery hits éléments ici 45 fois et s'attache auditeurs
• 45 total des écouteurs d'événement
• avenir .button éléments ajoutés à la scène ne turnRed

.on gestionnaire:

 $('#parent').on('click mouseover keyup', '.button', turnRed);

 function turnRed(){
      $(this).css('color','red');
 }

• 2 jQuery objets créés
• Aucun élément de boucle, de sorte que jQuery frappe les éléments une fois
• 3 total des écouteurs d'événement
• avenir .button éléments à ajouter à la scène en fait turnRed

Ici .on a clairement l'avantage

---

Si 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 .ons'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.