jQuery.click () vs onClick
Ich habe eine riesige jQuery-Anwendung und verwende die folgenden beiden Methoden für Klickereignisse.
Erste Methode
HTML
<div id="myDiv">Some Content</div>
jQuery
$('#myDiv').click(function(){
//Some code
});
Zweite Methode
HTML
<div id="myDiv" onClick="divFunction()">Some Content</div>
JavaScript-Funktionsaufruf
function divFunction(){
//Some code
}
Ich verwende entweder die erste oder die zweite Methode in meiner Anwendung. Welches ist besser? Besser für die Leistung? Und Standard?
Die Verwendung von $('#myDiv').click(function(){ ist besser , da es dem Standardmodell für die Ereignisregistrierung folgt. (jQuery intern verwendet addEventListener und attachEvent ).
Grundsätzlich ist das Registrieren eines Ereignisses auf moderne Weise die nauffällige Art und Weise, Ereignisse zu behandeln. Um mehr als einen Ereignis-Listener für das Ziel zu registrieren, können Sie addEventListener() für dasselbe Ziel aufrufen.
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
Warum addEventListener verwenden? (Aus MDN)
mit addEventListener können Sie einen Ereignis-Listener wie in W3C DOM angegeben registrieren. Die Vorteile sind wie folgt:
- Sie können mehr als einen Handler für ein Ereignis hinzufügen. Dies ist besonders nützlich für DHTML-Bibliotheken oder Mozilla-Erweiterungen, die auch dann gut funktionieren müssen, wenn andere Bibliotheken/Erweiterungen verwendet werden.
- Es gibt Ihnen eine feinere Kontrolle über die Phase, in der der Hörer aktiviert wird (Capturing vs. Bubbling).
- Es funktioniert mit jedem DOM-Element, nicht nur mit HTML-Elementen.
Weitere Informationen zur Registrierung moderner Veranstaltungen -> http://www.quirksmode.org/js/events_advanced.html
Andere Methoden wie das Setzen der HTML-Attribute , Beispiel:
<button onclick="alert('Hello world!')">
Oder DOM-Elementeigenschaften , Beispiel:
myEl.onclick = function(event){alert('Hello world');};
sind alt und können leicht überschrieben werden.
HTML-Attribut sollte vermieden werden, da dadurch das Markup größer und weniger lesbar wird. Bedenken in Bezug auf Inhalt/Struktur und Verhalten sind nicht gut voneinander getrennt, was es schwieriger macht, einen Fehler zu finden.
Das Problem bei den DOM-Elementeigenschaften besteht darin, dass nur ein Ereignishandler an ein Element gebunden werden kann pro Veranstaltung.
Weitere Informationen zur traditionellen Ereignisbehandlung -> http://www.quirksmode.org/js/events_tradmod.html
MDN-Referenz: https://developer.mozilla.org/en-US/docs/DOM/event
Verwenden Sie für eine bessere Leistung das native JavaScript. Verwenden Sie für eine schnellere Entwicklung jQuery. Überprüfen Sie den Leistungsvergleich unter jQuery vs Native Element Performance.
Ich habe einen Test in Firefox 16.0 32-Bit auf Windows Server 2008 R2/7 64-Bit durchgeführt
$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec
Aktivieren Sie für Klickereignisse Native Browser-Ereignisse vs. JQuery-Trigger oder jQuery vs Native Click Event Binding.
Testen in Chrome 22.0.1229.79 32-Bit unter 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
Soweit ich weiß, geht es bei Ihrer Frage nicht wirklich darum, ob Sie jQuery verwenden sollen oder nicht. Es ist vielmehr: Ist es besser, Ereignisse in HTML oder über Ereignis-Listener inline zu binden?
Inline-Bindung ist veraltet. Außerdem können Sie auf diese Weise nur eine Funktion an ein bestimmtes Ereignis binden.
Daher empfehle ich die Verwendung von Ereignis-Listenern. Auf diese Weise können Sie viele Funktionen an ein einzelnes Ereignis binden und diese später bei Bedarf wieder aufheben. Betrachten Sie diesen reinen JavaScript-Code:
querySelector('#myDiv').addEventListener('click', function () {
// Some code...
});
Dies funktioniert in den meisten modernen Browsern.
Wenn Sie jedoch jQuery bereits in Ihr Projekt aufnehmen, verwenden Sie einfach die Funktion jQuery: .on oder .click.
Sie können sie kombinieren und jQuery verwenden, um die Funktion an den Klick zu binden
<div id="myDiv">Some Content</div>
$('#myDiv').click(divFunction);
function divFunction(){
//some code
}
$('#myDiv').click ist besser, weil es JavaScript-Code von HTML trennt. Man muss versuchen, das Verhalten und die Struktur der Seite unterschiedlich zu halten . Das hilft sehr.
Entscheiden Sie sich dafür, da dies sowohl Standard als auch Leistung bietet.
$('#myDiv').click(function(){
//Some code
});
Als zweite Methode wird einfacher JavaScript-Code verwendet und ist schneller als jQuery. Aber hier wird die Leistung in etwa gleich sein.
Meiner Meinung nach ist onclick die bevorzugte Methode gegenüber .click, wenn die folgenden Bedingungen erfüllt sind:
- es gibt viele Elemente auf der Seite
- es muss nur ein Ereignis für das Klickereignis registriert werden
- Sie sind besorgt über die Leistung Ihres Mobiltelefons und die Akkulaufzeit
Diese Meinung habe ich aufgrund der Tatsache gebildet, dass die JavaScript-Engines auf Mobilgeräten vier- bis siebenmal langsamer sind als ihre Desktop-Gegenstücke, die in derselben Generation hergestellt wurden. Ich hasse es, wenn ich eine Website auf meinem Mobilgerät besuche und nervöses Scrollen erhalte, weil die jQuery alle Ereignisse auf Kosten meiner Benutzererfahrung und der Akkulaufzeit bindet. Ein weiterer unterstützender Faktor der letzten Zeit, obwohl dies nur ein Problem für Regierungsbehörden sein sollte;), wurde im IE7 ein Popup-Fenster mit einer Meldung angezeigt, dass der JavaScript-Prozess zu lange dauert ... Warten oder Abbrechen. Dies geschah jedes Mal, wenn es viele Elemente gab, an die über jQuery gebunden werden konnte.
Unterschied in den Werken. Wenn Sie click () verwenden, können Sie mehrere Funktionen hinzufügen. Wenn Sie jedoch ein Attribut verwenden, wird nur eine Funktion ausgeführt - die letzte.
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')" )
Wenn es sich um die Leistung handelt, ist die direkte Verwendung in jedem Fall immer schneller, aber die Verwendung eines Attributs ermöglicht es Ihnen, nur eine Funktion zuzuweisen.
Die Trennung von Bedenken ist hier von zentraler Bedeutung, und daher ist die Ereignisbindung die allgemein akzeptierte Methode. Dies ist im Grunde, was viele der vorhandenen Antworten gesagt haben.
Jedoch verwerfen Sie die Idee des deklarativen Markups nicht zu schnell. Es hat seinen Platz und ist bei Frameworks wie Angularjs das Herzstück.
Man muss sich darüber im Klaren sein, dass das ganze <div id="myDiv" onClick="divFunction()">Some Content</div> so sehr beschämt wurde, weil es von einigen Entwicklern missbraucht wurde. So erreichte es den Punkt der Sakrilegien, ähnlich wie tables. Einige Entwickler vermeiden tatsächlich tables für tabellarische Daten. Es ist das perfekte Beispiel für Menschen, die ohne Verständnis handeln.
Obwohl ich die Idee mag, mein Verhalten von meinen Ansichten zu trennen. Ich sehe kein Problem mit dem Markup, das angibt , was es tut (nicht , wie es macht es, das ist Verhalten). Es kann in Form eines tatsächlichen onClick-Attributs oder eines benutzerdefinierten Attributs vorliegen, ähnlich wie beim Bootstrap von Javascript-Komponenten.
Auf diese Weise können Sie durch einen Blick auf das Markup sehen, was es tut, anstatt zu versuchen, die JavaScript-Ereignisbindungen für die Suche umzukehren.
Als dritte Alternative zum oben genannten Verfahren können Sie also Datenattribute verwenden, um das Verhalten innerhalb des Markups deklarativ anzukündigen. Verhalten ist nicht sichtbar, aber auf einen Blick können Sie sehen, was passiert.
Bootstrap-Beispiel:
<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>
Quelle: http://getbootstrap.com/javascript/#popovers
Hinweis Der Hauptnachteil beim zweiten Beispiel ist die Verschmutzung des globalen Namespaces. Dies kann umgangen werden, indem entweder die dritte Alternative oben verwendet wird oder Frameworks wie Angular und ihre ng-click-Attribute mit automatischem Gültigkeitsbereich.
Keiner von beiden ist besser, da sie für verschiedene Zwecke verwendet werden können. onClick (sollte eigentlich onclick sein) schneidet etwas besser ab, aber ich bezweifle sehr, dass Sie dort einen Unterschied feststellen werden.
Es ist anzumerken, dass sie verschiedene Dinge tun: .click kann an jede jQuery-Auflistung gebunden werden, während onclick inline für die Elemente verwendet werden muss, an die sie gebunden werden sollen. Sie können auch nur ein Ereignis mit onclick binden, während Sie mit .click weiterhin Ereignisse binden können.
Meiner Meinung nach würde ich konsistent sein und .click überall verwenden und alle meines JavaScript-Codes zusammenhalten und vom HTML-Code trennen.
Verwenden Sie nicht onclick. Es gibt keinen Grund, es zu verwenden, es sei denn, Sie wissen, was Sie tun, und Sie tun es wahrscheinlich nicht.
<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />
onclick, onmouseover, onmouseout usw. Ereignisse sind tatsächlich schlecht für die Leistung (in Internet Explorer hauptsächlich go figure). Wenn Sie mit Visual Studio codieren und eine Seite damit ausführen, erstellt jede einzelne davon einen separaten SCRIPT-Block, der Speicherplatz belegt und somit die Leistung beeinträchtigt.
Ganz zu schweigen von einem Trennung von Bedenken : JavaScript und Layouts sollten getrennt sein!
Es ist immer besser, evenHandlers für eines dieser Ereignisse zu erstellen. Ein Ereignis kann Hunderte/Tausende von Elementen erfassen, anstatt Tausende von separaten Skriptblöcken für jedes einzelne zu erstellen!
(Auch alles, was alle anderen sagen.)
In den meisten Fällen sind native JavaScript-Methoden eine bessere Wahl als jQuery, wenn nur die Leistung berücksichtigt wird. JQuery verwendet jedoch JavaScript und vereinfacht die Entwicklung. Sie können jQuery verwenden, da es die Leistung nicht zu sehr beeinträchtigt. In Ihrem speziellen Fall ist der Leistungsunterschied nicht zu bemerken.
Die erste Methode ist zu bevorzugen. Es verwendet das erweiterte Ereignisregistrierungsmodell [s] , dh Sie können mehrere Handler an dasselbe Element anhängen. Sie können problemlos auf das Ereignisobjekt zugreifen, und der Handler kann im Bereich jeder Funktion leben. Es ist auch dynamisch, dh es kann jederzeit aufgerufen werden und eignet sich besonders für dynamisch erzeugte Elemente. Ob Sie jQuery, eine andere Bibliothek oder die nativen Methoden direkt verwenden, spielt keine Rolle.
Die zweite Methode, die Inline-Attribute verwendet, benötigt viele globale Funktionen (was zu einer Verschmutzung des Namespaces führt) und mischt den Inhalt/die Struktur (HTML) mit dem Verhalten (JavaScript). Verwenden Sie das nicht.
Ihre Frage zu Leistung oder Standards kann nicht einfach beantwortet werden. Die beiden Methoden sind einfach völlig unterschiedlich und machen unterschiedliche Dinge. Der erste ist mächtiger, während der zweite verachtet wird (was als schlechter Stil gilt).
Die erste Methode zur Verwendung von onclick ist nicht jQuery, sondern einfach Javascript, sodass Sie nicht den Overhead von jQuery erhalten. Der jQuery-Weg kann über Selektoren erweitert werden, wenn Sie ihn anderen Elementen hinzufügen müssen, ohne den Event-Handler zu jedem Element hinzuzufügen. Da Sie ihn jetzt haben, ist es nur eine Frage, ob Sie jQuery verwenden müssen oder nicht.
Da Sie jQuery verwenden, würde ich persönlich daran festhalten, da es konsistent ist und das Markup vom Skript entkoppelt.
Onclick Function Jquery
$('#selector').click(function(){ //Your Functionality });