jQuery.click () vs onClick

Ich habe eine riesige jQuery-Anwendung und verwende die folgenden zwei 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 $('#myDiv').click(function(){ist besser, da sie dem Standardmodell für die Ereignisregistrierung folgt. (jQuery intern verwendet addEventListenerund attachEvent).

Grundsätzlich ist die Registrierung eines Ereignisses auf moderne Weise die unauffällige Art, Ereignisse zu behandeln. Um mehr als einen Ereignis-Listener für das Ziel zu registrieren, können Sie addEventListener()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);

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

Warum addEventListener verwenden? (Von MDN)

Mit addEventListener können Sie einen Ereignis-Listener wie im W3C-DOM angegeben registrieren. Die Vorteile sind wie folgt:

• Es ermöglicht das Hinzufügen von mehr als einem Handler für ein Ereignis. 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.
• Sie können die Phase, in der der Hörer aktiviert wird, feiner steuern (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 Festlegen 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-Attribute sollten vermieden werden, da dadurch das Markup größer und weniger lesbar wird. Bedenken hinsichtlich Inhalt / Struktur und Verhalten sind nicht gut voneinander getrennt, was es schwieriger macht, einen Fehler zu finden.

Das Problem mit der DOM-Elementeigenschaftenmethode besteht darin, dass nur ein Ereignishandler pro Ereignis an ein Element gebunden werden kann.

Weitere Informationen zur herkömmlichen 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 bei jQuery mit der Leistung nativer Elemente .

Ich habe einen Test in Firefox 16.0 32-Bit unter Windows Server 2008 R2 / 7 64-Bit durchgeführt

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

Für Click - Ereignisse, überprüfen india Browser Ereignisse vs JQuery Trigger oder jQuery vs india Click Event Bindung .

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 eher so: 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 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 jQuery: .onoder die .clickFunktion.

Sie können sie kombinieren und mit jQuery die Funktion an den Klick binden

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

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

function divFunction(){
 //some code
}

$('#myDiv').clickist besser, weil es JavaScript-Code von HTML trennt . Man muss versuchen, das Seitenverhalten und die Struktur anders zu halten . Das hilft sehr.

Entscheide dich dafür, denn es gibt dir sowohl Standard als auch Leistung.

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

Als zweite Methode dient einfacher JavaScript-Code und ist schneller als jQuery. Aber hier wird die Leistung ungefähr gleich sein.

IMHO ist onclick die bevorzugte Methode gegenüber .click nur, 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 des Mobiltelefons / die Akkulaufzeit

Ich habe diese Meinung 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 Site auf meinem Mobilgerät besuche und nervöses Scrollen erhalte, weil die jQuery alle Ereignisse auf Kosten meiner Benutzererfahrung und Akkulaufzeit bindet. Ein weiterer aktueller unterstützender Faktor, obwohl dies nur Regierungsbehörden betreffen sollte;), wir hatten ein IE7-Popup mit einem Meldungsfeld, das besagt, dass der JavaScript-Prozess zu lange dauert ... warten oder abbrechen. Dies geschah jedes Mal, wenn viele Elemente über jQuery gebunden werden mussten.

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.

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')" )

Wenn es um Leistung geht, ist die direkte Verwendung in jedem Fall immer schneller, aber die Verwendung eines Attributs kann nur eine Funktion zuweisen.

Die Trennung von Bedenken ist hier der Schlüssel, und daher ist die Ereignisbindung die allgemein akzeptierte Methode. Dies ist im Grunde, was viele der vorhandenen Antworten gesagt haben.

Allerdings wirft die Idee nicht deklarativen Markup zu schnell weg. Es hat seinen Platz und ist mit Frameworks wie Angularjs das Herzstück.

Es muss ein Verständnis dafür bestehen, dass das Ganze <div id="myDiv" onClick="divFunction()">Some Content</div>so stark beschämt wurde, weil es von einigen Entwicklern missbraucht wurde. So erreichte es den Punkt von sakrilegischen Ausmaßen, ähnlich wie tables. Einige Entwickler vermeiden tatsächlichtables 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 damit, dass das Markup deklariert, was es tut (nicht wie es es tut, das ist Verhalten). Dies kann in Form eines tatsächlichen onClick-Attributs oder eines benutzerdefinierten Attributs erfolgen, ähnlich wie bei Bootstraps-Javascript-Komponenten.

Auf diese Weise können Sie durch einen Blick auf das Markup sehen, was funktioniert, anstatt zu versuchen, Javascript-Ereignisordner für die Suche umzukehren.

Als dritte Alternative zu den oben genannten können Datenattribute verwendet werden, um das Verhalten innerhalb des Markups deklarativ anzukündigen. Verhalten wird aus dem Blickfeld gehalten, 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 des zweiten Beispiels ist die Verschmutzung des globalen Namespace. Dies kann umgangen werden, indem entweder die dritte Alternative oben oder Frameworks wie Angular und ihre ng-click-Attribute mit automatischem Gültigkeitsbereich verwendet werden.

Keiner von beiden ist besser darin, dass sie für verschiedene Zwecke verwendet werden können. onClick(sollte eigentlich sein onclick) schneidet etwas besser ab, aber ich bezweifle sehr, dass Sie dort einen Unterschied bemerken werden.

Es ist erwähnenswert, dass sie verschiedene Dinge tun: Sie .clickkönnen an jede jQuery-Sammlung gebunden werden, während onclicksie inline für die Elemente verwendet werden müssen, an die sie gebunden werden sollen. Sie können auch nur ein Ereignis an die Verwendung binden onclick, während .clickSie weiterhin Ereignisse binden können.

Meiner Meinung nach würde ich konsequent sein und einfach .clicküberall verwenden und meinen gesamten JavaScript-Code zusammenhalten und vom HTML trennen.

Nicht benutzen 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 ( hauptsächlich in Internet Explorer , siehe Abbildung). Wenn Sie mit Visual Studio codieren und eine Seite mit diesen ausführen, erstellt jede einzelne Seite einen separaten SCRIPT-Block, der Speicher beansprucht und somit die Leistung beeinträchtigt.

Ganz zu schweigen davon, dass Sie eine Trennung von Bedenken haben sollten : JavaScript und Layouts sollten getrennt werden!

Es ist immer besser, für jedes dieser Ereignisse gerade Handler zu erstellen. Ein Ereignis kann Hunderte / Tausende von Elementen erfassen, anstatt Tausende von separaten Skriptblöcken für jedes Ereignis zu erstellen!

(Auch alles, was alle anderen sagen.)

Nun, eine der Hauptideen hinter jQuery ist es, JavaScript vom fiesen HTML- Code zu trennen . Die erste Methode ist der richtige Weg.

In den meisten Fällen sind native JavaScript-Methoden eine bessere Wahl als jQuery, wenn die Leistung das einzige Kriterium ist. JQuery verwendet jedoch JavaScript und erleichtert die Entwicklung. Sie können jQuery verwenden, da dies die Leistung nicht zu stark beeinträchtigt. In Ihrem speziellen Fall ist der Leistungsunterschied ignorierbar.

Die erste Verwendungsmethode onclick ist nicht jQuery, sondern einfach Javascript, sodass Sie nicht den Overhead von jQuery erhalten. Die jQuery-Methode kann über Selektoren erweitert werden, wenn Sie sie anderen Elementen hinzufügen müssen, ohne den Ereignishandler zu jedem Element hinzuzufügen. Wie Sie sie jetzt haben, ist es jedoch nur eine Frage, ob Sie jQuery verwenden müssen oder nicht.

Persönlich, da Sie jQuery verwenden, würde ich dabei bleiben, da es konsistent ist und das Markup vom Skript entkoppelt.

Die erste Methode ist zu bevorzugen. Es verwendet die erweiterten Ereignisregistrierungsmodelle, dh Sie können mehrere Handler an dasselbe Element anhängen. Sie können problemlos auf das Ereignisobjekt zugreifen und der Handler kann in jedem Funktionsumfang ausgeführt werden. Außerdem ist es dynamisch, dh es kann jederzeit aufgerufen werden und eignet sich besonders gut für dynamisch generierte 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 Namespace 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 (als schlechter Stil angesehen).

Onclick Function Jquery

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