performances entre jquery bind click et tag onclick

Je développe une application Web et j’utilise beaucoup de tâches JavaScript. J’ai pas mal de balises liées à Jquery qui cliquent pour faire des travaux, alors j’ai un code comme celui-ci:

Code HTML:

some content here some content here .... 

Jquery code:

  $('#id1').click(function(){ //do something here.. return false; }); $('#id2').click(function(){ //do something else here.. return false; }); 

avec cette approche, lorsque le script est exécuté, jquery doit rechercher les sélecteurs (id1, id2, ect).

mais il existe une autre approche qui évite de rechercher des sélecteurs:

 some content here some content here 

et code js:

  function f1(){ //do something here.. }); function f2(){ //do something else here.. }); 

quelle approche est la meilleure compte tenu des performances? Merci pour l’aide.

Le gain de performances réel consiste à utiliser un seul gestionnaire d’événements attaché à l’élément parent et à capturer l’événement généré par l’élément children avec event.target , car les événements débouchent par défaut en JavaScript sur le parent le plus à l’extérieur.

Enveloppez votre lien dans un div

  

Ne lui associez qu’un seul auditeur d’événement

 $('#parent').click(function(event){ // event.target is now the element who originated the event $(event.target).doSomething(); }); 

Cela représente une forte augmentation de la vitesse, en particulier dans les navigateurs plus anciens tels que IE et lorsque vous commencez à avoir de nombreux événements.

Voir exemple ici

Oubliez les performances – toute différence entre les deux sera sans conséquence.

La première approche est BEAUCOUP mieux car elle maintient une séparation ssortingcte entre le comportement et le contenu.

Incidemment, la différence de performance n’est engagée que lors de l’ affectation du gestionnaire d’événements . Dans ce cas, l’appel en ligne ne doit pas “trouver” l’élément dom, cependant, puisque votre sélecteur jQuery sélectionne par id (ce qui est très efficace), le “temps système” engendré par l’étape supplémentaire sera infime.

En ce qui concerne les performances, l’appel en ligne est rapide car il est déclenché immédiatement alors que si vous utilisez jQuery, il écoute cet événement, trouve tous les gestionnaires attachés et les exécute en séquence. Mais jquery vous permet d’attacher de manière systématique autant de gestionnaires que vous le souhaitez.

Une possibilité serait d’utiliser .delegate () où vous pouvez définir des liaisons spécifiques au contexte. Cela devrait être plus rapide que les deux .live () et plusieurs liaisons .click () en raison du fonctionnement du délégué. Il y a une excellente rédaction à ce sujet ici , un EXCELLENT DOIT LIRE SOUS SO ici. Bonne chance!

HTML

  

Jquery / Javascript

 $("#wrapper").delegate("#id1", "click", function(e){ e.preventDefault(); //do something here.. }); 

API Jquery Delegate

Selon la réponse de Jose Faeti, voici deux questions:

Le problème est qu’une balise ancre contenant d’autres éléments, tels que des divs ou des spans, n’est pas vue comme ayant été cliquée. Son élément enfant est tho.

 
hello

i don't need to be listened to
there
neither me, only a-tags should be concerned
only i am "really" listened to
more content

C’est peut-être moche, mais dans notre application existante, c’est l’état actuel. J’ai donc reformulé le code JavaScript correspondant comme suit:

 $('#foo').click( function ( event ) { event.preventDefault(); if( $(event.target).hasClass('clickable') ) { alert('clicked: ' + event.target.name ); } else { if( $(event.target).closest('a.clickable').length ) alert('has parent: ' + $(event.target).closest('a.clickable').attr('name') ); } }); 

Ma question: Existe-t-il une meilleure solution à cela? Plus performant? Est-ce moche ou feriez-vous différemment?

À votre santé