Question jQuery.click () vs onClick


J'ai une énorme application jQuery, et j'utilise les deux méthodes ci-dessous pour les événements click.

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?


495
2017-09-27 18:02


origine


Réponses:


En utilisant $('#myDiv').click(function(){ est meilleur car il suit le modèle standard d'enregistrement des événements. (jQuery intérieurement les usages addEventListener et attachEvent).

En principe, enregistrer un événement dans façon moderne est le discret manière de gérer les événements. Aussi pour enregistrer plus d'un écouteur d'événement 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);

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

Pourquoi utiliser addEventListener? (De MDN)

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

  • Il permet d'ajouter plus d'un gestionnaire unique pour un événement. Ceci est particulièrement utile pour les bibliothèques DHTML ou les extensions Mozilla qui   besoin de 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'enregistrement d'événements modernes -> http://www.quirksmode.org/js/events_advanced.html

D'autres méthodes telles que la définition du Attributs HTML, Exemple:

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

Ou Propriétés de l'élément DOM, Exemple:

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

sont vieux et peuvent facilement être écrites.

Attribut HTML devrait être évité car il rend le balisage plus grand et moins lisible. Les soucis de contenu / structure et comportement ne sont pas bien séparés, rendant un bug plus difficile à trouver.

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

En savoir plus sur la gestion des événements traditionnels -> http://www.quirksmode.org/js/events_tradmod.html

Référence MDN: https://developer.mozilla.org/en-US/docs/DOM/event


493
2017-09-27 18:04



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, cochez Événements du navigateur natif vs déclencheur jquery ou Liaison d'événements jQuery vs Native Click.

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

59
2017-09-27 18:09



D'après ce que je comprends, votre question ne concerne pas vraiment l'utilisation de jQuery ou non. C'est plutôt: Est-il préférable de lier les événements en ligne dans HTML ou via les écouteurs d'événement?

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

Par conséquent, je recommande d'utiliser des écouteurs d'événement. De cette façon, vous serez capable de lier de nombreuses fonctions à un seul événement et de les dissocier 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 incluez déjà jQuery dans votre projet, utilisez jQuery: .on ou .click fonction.


37
2017-09-27 18:05



$('#myDiv').click est mieux, car il sépare le code JavaScript de HTML. Il faut essayer de garder la page le comportement et la structure différente. Cela aide beaucoup.


13
2017-09-27 18:04



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
}

12
2017-09-28 06:51



Optez pour cela car il vous donnera à la fois standard et performance.

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

Comme la deuxième méthode est le code JavaScript simple et est plus rapide que jQuery. Mais ici la performance sera à peu près la même.


12
2018-03-19 19:25



À mon humble avis, onclick est la méthode préférée sur .Click seulement 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 vous inquiétez de la performance mobile / de la durée de vie de la batterie

J'ai formé cette opinion car 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 instable 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, même si cela ne devrait concerner que les agences gouvernementales;), IE7 affiche une boîte de message indiquant que le processus JavaScript prend du temps ... attendre ou annuler le processus. Cela arrivait chaque fois qu'il y avait beaucoup d'éléments à lier via jQuery.


10
2017-09-27 18:32



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.

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 performance, en tout cas, l'utilisation directe est toujours plus rapide, mais en utilisant un attribut, vous ne pourrez affecter qu'une seule fonction.


9
2017-10-18 12:16