jQuery.click() vs onClick

Question

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 soit la première, soit la deuxième méthode dans mon application. Laquelle est la meilleure ? Meilleure pour la performance ? Et pour la norme ?

Answer 1

Utilisation de $('#myDiv').click(function(){ es meilleur car il suit le modèle standard d'enregistrement des événements. (jQuery en interne utilise addEventListener y attachEvent ).

Fondamentalement, l'enregistrement d'un événement dans méthode moderne est le discret manière de traiter 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);

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

Pourquoi utiliser addEventListener ? (De MDN)

addEventListener est la façon d'enregistrer un écouteur d'événement comme spécifié dans le 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 doivent doivent fonctionner correctement même si d'autres bibliothèques/extensions sont utilisées.
• Il vous permet de contrôler plus finement la phase d'activation de l'écouteur (capture ou bulle).
• Il fonctionne sur tous les éléments du DOM, et 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

D'autres méthodes, telles que le réglage de la Attributs HTML par exemple :

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

Ou Propriétés des éléments du DOM par exemple :

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

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

Attribut HTML doit être évitée car elle rend le balisage plus gros et moins lisible. Les préoccupations relatives au contenu/structure et au comportement ne sont pas bien séparées, ce qui rend un bogue plus difficile à trouver.

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

En savoir plus sur le traitement traditionnel des événements -> http://www.quirksmode.org/js/events_tradmod.html

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

Answer 2

Pour de meilleures performances, utilisez le JavaScript natif. Pour un développement plus rapide, utilisez jQuery. Vérifiez la comparaison des performances sur Performances de jQuery et des éléments natifs .

J'ai effectué un test avec 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 clics, vérifiez Événements du navigateur natif et déclencheur jquery o Liaison d'événements de clics jQuery ou natifs .

Test dans Chrome 22.0.1229.79 32-bit sur Windows Server 2008 R2 / 7 64-bit

$('#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

Answer 3

D'après ce que je comprends, votre question n'est pas vraiment de savoir s'il faut utiliser jQuery ou non. C'est plutôt : Est-il préférable de lier les événements en ligne dans le HTML ou par le biais de récepteurs d'événements ?

La liaison en ligne est dépréciée. De plus, de cette manière, vous ne pouvez lier qu'une seule fonction à un certain événement.

Je recommande donc 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.

Toutefois, si vous incluez déjà jQuery dans votre projet, utilisez simplement jQuery : .on o .click fonction.

Answer 4

Vous pouvez les combiner, utiliser jQuery pour lier la fonction au clic.

<div id="myDiv">Some Content</div>

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

Answer 5

À mon avis, la méthode onclick est préférable à la méthode .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 clic
• Vous êtes préoccupé par les performances mobiles et l'autonomie de la batterie.

Je me suis forgé cette opinion en constatant que les moteurs JavaScript des appareils mobiles sont 4 à 7 fois plus lents que ceux des ordinateurs de bureau de la même génération. Je déteste quand je visite un site sur mon appareil mobile et que le défilement est saccadé parce que le jQuery lie tous les événements au détriment de mon expérience utilisateur et de l'autonomie de la batterie. Un autre facteur de soutien récent, même si cela ne devrait concerner que les agences gouvernementales ;) nous avons vu IE7 s'ouvrir avec une boîte de message indiquant que le processus JavaScript prend trop de temps... attendez ou annulez le processus. Cela se produisait chaque fois qu'il y avait beaucoup d'éléments à lier via jQuery.