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?

L'utilisation $('#myDiv').click(function(){est meilleure car elle suit le modèle d'enregistrement d'événement standard. (jQuery utilise en interneaddEventListener et attachEvent).

Fondamentalement, l'enregistrement d'un événement de manière moderne est la manière discrète de gérer les événements. De plus, pour enregistrer plusieurs écouteurs d'événements pour la cible, vous pouvez appeler addEventListener()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);

http://jsfiddle.net/aj55x/1/

Pourquoi utiliser addEventListener? (De MDN)

addEventListener est le moyen d'enregistrer un écouteur d'événements comme spécifié dans le DOM W3C. Ses avantages sont les suivants:

• Il permet d'ajouter plus d'un seul 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.
• Il vous donne un contrôle plus fin de la phase lorsque l'auditeur est activé (capture vs bouillonnement)
• Il fonctionne sur n'importe quel élément DOM, pas seulement sur les éléments HTML.

En savoir plus sur l'inscription à un événement moderne -> http://www.quirksmode.org/js/events_advanced.html

Autres méthodes telles que la définition des attributs HTML , exemple:

<button onclick="alert('Hello world!')">

Ou les propriétés des éléments DOM , par exemple:

myEl.onclick = function(event){alert('Hello world');}; 

sont vieux et peuvent être écrasés facilement.

L'attribut HTML doit être évité car il rend le balisage plus grand et moins lisible. Les préoccupations concernant le contenu / la structure et le comportement ne sont pas bien séparées, ce qui rend un bogue plus difficile à trouver.

Le problème avec la méthode des propriétés des éléments DOM est qu'un seul gestionnaire d'événements peut être lié à un élément par événement.

En savoir plus sur la gestion traditionnelle des événements -> 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 fait 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, vérifiez les événements du navigateur natif par rapport au déclencheur jquery ou jQuery par rapport à la liaison d'événements Click 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 je comprends, votre question n'est pas vraiment de savoir si utiliser jQuery ou non. C'est plutôt: est-il préférable de lier des événements en ligne en HTML ou via des écouteurs d'événements?

La liaison en ligne est obsolète. De plus, de cette façon, vous ne pouvez lier qu'une fonction à un certain événement.

Par conséquent, je recommande d'utiliser des écouteurs d'événements. De cette façon, vous pourrez lier de nombreuses fonctions à un seul événement et les dissocier ultérieurement 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 incluez déjà jQuery dans votre projet - utilisez simplement jQuery: .onou la .clickfonction.

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').clickest mieux, car il sépare le code JavaScript du 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 performances.

 $('#myDiv').click(function(){
      //Some code
 });

Comme la deuxième méthode est un simple code JavaScript et est plus rapide que jQuery. Mais ici, les performances seront à peu près les mêmes.

À mon humble avis, onclick est la méthode préféré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 préoccupé par les performances mobiles / la durée de vie de la batterie

J'ai formé cette opinion parce 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 quand je visite un site sur mon appareil mobile et que je reçois un défilement nerveux parce que jQuery lie tous les événements au détriment de mon expérience utilisateur et de la durée de vie de la batterie. Un autre facteur de soutien récent, bien que cela ne devrait concerner que les agences gouvernementales;), nous avons eu une fenêtre contextuelle IE7 avec une boîte de message indiquant que le processus JavaScript prend trop de temps ... attendre ou annuler le processus. Cela arrivait à chaque fois qu'il y avait beaucoup d'éléments auxquels se lier via jQuery.

Différence dans les œuvres. 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.

DEMO

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 performances, en tout cas, l'utilisation directe est toujours plus rapide, mais l'utilisation d'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 rapidement l'idée d'un balisage déclaratif. Il a sa place, et avec des cadres comme Angularjs, est la pièce maîtresse.

Il faut comprendre que l'ensemble a <div id="myDiv" onClick="divFunction()">Some Content</div>été honteux si fortement parce qu'il a été abusé par certains développeurs. Il a donc atteint le point de proportions sacrilèges, un peu comme tables. Certains développeurs évitent en faittables les données tabulaires. C'est l'exemple parfait de personnes agissant sans comprendre.

Bien que j'aime l'idée de garder mon comportement séparé de mes opinions. Je ne vois aucun problème avec le balisage déclarant ce qu'il fait (pas comment il le fait, c'est un comportement). Il peut prendre la forme 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 les classeurs d'événements javascript de recherche.

Donc, comme troisième alternative à ce qui précède, utiliser des attributs de données pour annoncer de manière déclarative le comportement au sein du balisage. Le comportement est gardé hors de la vue, mais en un coup d'œil, vous pouvez voir ce qui se passe.

Exemple d'amorçage:

<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é en utilisant la troisième alternative ci-dessus, ou des cadres comme Angular et leurs attributs ng-click avec portée automatiquement.

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 l'être onclick) fonctionne très légèrement mieux, mais je doute fortement que vous remarquiez une différence.

Il convient de noter qu'ils font des choses différentes: .clickpeuvent être liés à n'importe quelle collection jQuery alors qu'ils onclickdoivent être utilisés en ligne sur les éléments auxquels vous souhaitez qu'ils soient liés. Vous pouvez également lier un seul événement à l'utilisation onclick, tout en .clickvous permettant de continuer à lier des événements.

À mon avis, je serais cohérent à ce sujet et j'utiliserais simplement .clickpartout et garderais tout mon code JavaScript ensemble et séparé du HTML.

Ne pas utiliser onclick. Il n'y a aucune raison de l'utiliser à moins que vous ne sachiez ce que vous faites, et ce n'est probablement pas le cas.

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

les événements onclick, onmouseover, onmouseout, etc. sont en fait mauvais pour les performances (dans Internet Explorer principalement, allez comprendre). Si vous codez à l'aide de Visual Studio , lorsque vous exécutez une page avec ceux-ci, chacun d'eux créera un bloc SCRIPT distinct occupant de la mémoire et ralentissant ainsi les performances.

Sans oublier que vous devez avoir une séparation des préoccupations : JavaScript et les mises en page doivent être séparés!

Il est toujours préférable de créer evenHandlers pour l'un 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 séparés pour chacun!

(De plus, tout ce que tout le monde dit.)

Eh bien, l'une des principales idées derrière jQuery est de séparer JavaScript du code HTML désagréable . La première méthode est la voie à suivre.

La plupart du temps, les méthodes JavaScript natives sont un meilleur choix que jQuery lorsque les performances sont les seuls critères, mais jQuery utilise JavaScript et facilite le développement. Vous pouvez utiliser jQuery car il ne dégrade pas trop les performances. Dans votre cas spécifique, la différence de performances est ignorable.

La première méthode d'utilisation onclickn'est pas jQuery mais simplement Javascript, donc vous n'obtenez pas la surcharge de jQuery. La méthode jQuery peut être développée via des sélecteurs si vous aviez besoin de l'ajouter à d'autres éléments sans ajouter le gestionnaire d'événements à chaque élément, mais comme vous l'avez maintenant, ce n'est qu'une question si vous devez utiliser jQuery ou non.

Personnellement, puisque vous utilisez jQuery, je m'en tiendrai à cela car il est cohérent et dissocie le balisage du script.

La première méthode est de préférer. Il utilise le ou les modèles 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 est particulièrement bien adapté aux éléments générés dynamiquement. Que vous utilisiez jQuery, une autre bibliothèque ou les méthodes natives n'a pas vraiment d'importance.

La deuxième méthode, utilisant des attributs en ligne, nécessite beaucoup de fonctions globales (ce qui conduit à une pollution de l'espace de noms) et mélange le contenu / la structure (HTML) avec le comportement (JavaScript). Ne l'utilisez pas.

Il est difficile de répondre à votre question sur les performances ou les normes. Les deux méthodes sont juste 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).

Fonction Onclick Jquery

$('#selector').click(function(){ //Your Functionality });