jQuery.click () vs onClick
J'ai une énorme application jQuery et j'utilise les deux méthodes ci-dessous pour les événements de clic.
Première méthode
HTML
<div id="myDiv">Some Content</div>
jQuery
$('#myDiv').click(function(){
//Some code
});
Deuxième méthode
HTML
<div id="myDiv" onClick="divFunction()">Some Content</div>
Appel de fonction JavaScript
function divFunction(){
//Some code
}
J'utilise la première ou la deuxième méthode dans mon application. Quel est le meilleur? Mieux pour la performance? Et standard?
Utiliser $('#myDiv').click(function(){ est meilleur car il suit le modèle d'enregistrement d'événement standard. (jQuery en interne utilise addEventListener et attachEvent ).
Fondamentalement, enregistrer un événement de la manière moderne est le moyen discret de gérer les événements. De plus, pour enregistrer plus d'un écouteur d'événements pour la cible, vous pouvez appeler addEventListener() pour la même cible.
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
Pourquoi utiliser addEventListener? (à partir de MDN)
addEventListener est le moyen d'enregistrer un écouteur d'événement comme spécifié dans le DOM W3C. Ses avantages sont les suivants:
- Il permet d'ajouter plus d'un gestionnaire pour un événement. Ceci est particulièrement utile pour les bibliothèques DHTML ou les extensions Mozilla qui doivent bien fonctionner même si d'autres bibliothèques/extensions sont utilisées.
- Cela vous donne un contrôle plus précis de la phase d'activation de l'auditeur (capture par rapport au bullage)
- Cela fonctionne sur n'importe quel élément DOM, pas seulement sur les éléments HTML.
En savoir plus sur l'enregistrement moderne d'événements -> http://www.quirksmode.org/js/events_advanced.html
D'autres méthodes telles que la définition de attributs HTML , exemple:
<button onclick="alert('Hello world!')">
Ou propriétés d'élément DOM , exemple:
myEl.onclick = function(event){alert('Hello world');};
sont vieux et ils peuvent être écrits facilement.
L'attribut HTML doit être évité car il rend le balisage plus gros et moins lisible. Les problèmes de contenu/structure et comportement ne sont pas bien séparés, ce qui rend un bogue plus difficile à trouver.
Le problème avec la méthode des propriétés d'élément DOM est qu'un seul gestionnaire d'événements peut être lié à un élément. par événement.
En savoir plus sur la gestion d'événement traditionnelle -> http://www.quirksmode.org/js/events_tradmod.html
Référence MDN: https://developer.mozilla.org/en-US/docs/DOM/event
Pour de meilleures performances, utilisez le JavaScript natif. Pour un développement plus rapide, utilisez jQuery. Vérifiez la comparaison des performances à jQuery vs Native Element Performance.
J'ai effectué un test dans Firefox 16.0 32 bits sur Windows Server 2008 R2/7 64 bits
$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec
Pour les événements de clic, cochez événements du navigateur natif vs déclencheur jquery ou jQuery vs liaison d'événement de clic natif.
Test dans Chrome 22.0.1229.79 32 bits sur Windows Server 2008 R2/7 64 bits
$('#jquery a').click(window.testClickListener); // 2,957 operations/second
[].forEach.call( document.querySelectorAll('#native a'), function(el) {
el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second
D'après ce que j'ai compris, votre question ne concerne pas vraiment l'utilisation de jQuery ou non. C'est plutôt: Est-il préférable de lier des événements en HTML ou via des écouteurs d'événements?
La liaison en ligne est obsolète. De plus, de cette manière, vous ne pouvez lier qu'une fonction à un événement donné.
Par conséquent, je recommande d'utiliser des écouteurs d'événements. De cette façon, vous pourrez lier plusieurs fonctions à un seul événement et les lier plus tard si nécessaire. Considérez ce code JavaScript pur:
querySelector('#myDiv').addEventListener('click', function () {
// Some code...
});
Cela fonctionne dans la plupart des navigateurs modernes.
Cependant, si vous avez déjà inclus jQuery dans votre projet, utilisez simplement la fonction jQuery: .on ou .click.
Vous pouvez les combiner, utilisez jQuery pour lier la fonction au clic
<div id="myDiv">Some Content</div>
$('#myDiv').click(divFunction);
function divFunction(){
//some code
}
$('#myDiv').click est préférable, car il sépare le code JavaScript de HTML . Il faut essayer de garder le comportement et la structure de la page différents . Cela aide beaucoup.
Allez-y car cela vous donnera à la fois standard et performance.
$('#myDiv').click(function(){
//Some code
});
La seconde méthode consiste en un code JavaScript simple et est plus rapide que jQuery. Mais ici, les performances seront approximativement les mêmes.
IMHO, onclick est la méthode recommandée par rapport à .click uniquement lorsque les conditions suivantes sont remplies:
- il y a beaucoup d'éléments sur la page
- un seul événement à enregistrer pour l'événement click
- Vous êtes inquiet pour les performances mobiles/la vie de la batterie
J'ai formé cette opinion en raison du fait que les moteurs JavaScript sur les appareils mobiles sont 4 à 7 fois plus lents que leurs homologues de bureau qui ont été fabriqués dans la même génération. Je déteste ça quand je visite un site sur mon appareil mobile et que je reçois un défilement nerveux, car jQuery lie tous les événements au détriment de mon expérience utilisateur et de la vie de ma batterie. Un autre facteur de soutien récent, bien que cela ne devrait concerner que les agences gouvernementales;), nous avons eu IE7 contextuel avec une boîte de message indiquant que le processus JavaScript prend beaucoup de temps ... attendre ou annuler le processus. Cela se produisait à chaque fois qu'il y avait beaucoup d'éléments à lier via jQuery.
Différence dans les travaux. Si vous utilisez click (), vous pouvez ajouter plusieurs fonctions, mais si vous utilisez un attribut, une seule fonction sera exécutée - la dernière.
HTML
<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>
JavaScript
$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})
$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )
Si nous parlons de performance, dans tous les cas, l’utilisation directe est toujours plus rapide, mais en utilisant un attribut, vous ne pourrez attribuer qu’une seule fonction.
La séparation des préoccupations est la clé ici, et donc la liaison d'événement est la méthode généralement acceptée. C’est essentiellement ce que beaucoup de réponses existantes ont dit.
Cependant ne jetez pas trop vite l'idée du balisage déclaratif. Il a sa place, et avec des cadres comme Angularjs, est la pièce maîtresse.
Il faut bien comprendre que l'ensemble <div id="myDiv" onClick="divFunction()">Some Content</div> a été si honteux parce qu'il a été mal utilisé par certains développeurs. Ainsi, il a atteint le point de proportions sacrilèges, un peu comme tables. En fait, certains développeurs évitent tables pour les données tabulaires. C'est l'exemple parfait de personnes agissant sans compréhension.
Bien que j'aime l'idée de garder mon comportement séparé de mes vues. Je ne vois aucun problème avec le balisage déclarant ce que il fait (pas comment ça le fait, c'est le comportement). Il peut s'agir d'un attribut onClick réel ou d'un attribut personnalisé, un peu comme les composants javascript de bootstraps.
De cette façon, en regardant simplement le balisage, vous pouvez voir ce qui se passe, au lieu d'essayer d'inverser la recherche dans les classeurs d'événements javascript.
Ainsi, comme troisième alternative à la précédente, utilisez des attributs de données pour annoncer le comportement de manière déclarative dans le balisage. Le comportement est gardé hors de la vue, mais en un coup d'œil, vous pouvez voir ce qui se passe.
Exemple de bootstrap:
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Source: http://getbootstrap.com/javascript/#popovers
Remarque Le principal inconvénient du deuxième exemple est la pollution de l'espace de noms global. Cela peut être contourné soit en utilisant la troisième alternative ci-dessus, soit en utilisant des frameworks tels que Angular et leurs attributs ng-click à portée automatique.
Ni l'un ni l'autre n'est meilleur en ce sens qu'ils peuvent être utilisés à des fins différentes. onClick (devrait en fait être onclick) fonctionne très légèrement mieux, mais je doute fort que vous remarquiez une différence.
Il est à noter qu'ils font différentes choses: .click peut être lié à n'importe quelle collection jQuery alors que onclick doit être utilisé en ligne sur les éléments auxquels vous souhaitez qu'elle soit liée. Vous pouvez également lier un seul événement à l'aide de onclick, alors que .click vous permet de continuer à lier des événements.
À mon avis, je serais cohérent à ce sujet et utiliserais simplement .click partout et conserver tous de mon code JavaScript ensemble et séparé du HTML.
N'utilisez pas onclick. Il n'y a aucune raison de l'utiliser à moins que vous sachiez ce que vous faites, et probablement pas.
<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />
les événements onclick, onmouseover, onmouseout, etc. sont en fait mauvais pour la performance (dans Internet Explorer principalement, allez figure). Si vous codez à l'aide de Visual Studio , lorsque vous exécutez une page avec ces éléments, chacun d'entre eux créera un bloc SCRIPT distinct occupant de la mémoire, ce qui ralentirait les performances.
Sans oublier que vous devriez avoir un séparation des problèmes : JavaScript et les mises en page doivent être séparés!
Il est toujours préférable de créer evenHandlers pour n'importe lequel de ces événements: un événement peut capturer des centaines/milliers d'éléments au lieu de créer des milliers de blocs de script distincts pour chacun d'entre eux!
(En outre, tout ce que tout le monde dit.)
La plupart du temps, les méthodes JavaScript natives constituent un meilleur choix que jQuery lorsque les performances sont le seul critère à prendre en compte, mais jQuery utilise JavaScript et facilite le développement. Vous pouvez utiliser jQuery car cela ne dégrade pas trop les performances. Dans votre cas particulier, la différence de performance est ignorable.
La première méthode consiste à préférer. Il utilise le modèle d'enregistrement d'événement avancé [s] , ce qui signifie que vous pouvez attacher plusieurs gestionnaires au même élément. Vous pouvez facilement accéder à l'objet événement et le gestionnaire peut vivre dans la portée de n'importe quelle fonction. De plus, il est dynamique, c’est-à-dire qu’il peut être invoqué à tout moment et convient particulièrement aux éléments générés dynamiquement. Que vous utilisiez jQuery, une autre bibliothèque ou les méthodes natives directement n'a pas d'importance.
La seconde méthode, utilisant des attributs inline, nécessite beaucoup de fonctions globales (ce qui conduit à une pollution des espaces de noms) et mélange le contenu/structure (HTML) avec le comportement (JavaScript). Ne pas utiliser ça.
Il est difficile de répondre facilement à votre question sur les performances ou les normes. Les deux méthodes sont complètement différentes et font des choses différentes. Le premier est plus puissant, tandis que le second est méprisé (considéré comme un mauvais style).
La première méthode d’utilisation de onclick n’est pas jQuery mais simplement Javascript, de sorte que vous n’obtenez pas la surcharge de jQuery. La méthode jQuery peut être développée via des sélecteurs si vous devez l’ajouter à d’autres éléments sans ajouter le gestionnaire d’événements à chaque élément, mais comme vous l’avez maintenant, la question de savoir si vous devez utiliser jQuery ou non est une question.
Personnellement, depuis que vous utilisez jQuery, je m'en tiens à cela car il est cohérent et découple le balisage du script.
Fonction Onclick Jquery
$('#selector').click(function(){ //Your Functionality });