jQuery.click() vs onClick

Question

Ich habe eine riesige jQuery-Anwendung, und ich bin mit den unten zwei Methoden für Klick-Ereignisse.

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 in meiner Bewerbung entweder die erste oder die zweite Methode. Welche Methode ist besser? Besser für die Leistung? Und Standard?

Answer 1

$('#myDiv').click ist besser, denn es trennt JavaScript-Code von HTML . Man muss versuchen, die Seite zu halten Verhalten und Struktur unterschiedlich . Das ist sehr hilfreich.

Answer 2

Unterschiedliche Arbeiten. Wenn Sie click() verwenden, können Sie mehrere Funktionen hinzufügen, aber wenn Sie 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 die Leistung geht, ist die direkte Verwendung in jedem Fall schneller, aber bei der Verwendung eines Attributs können Sie nur eine Funktion zuweisen.

Answer 3

IMHO ist onclick nur dann die bessere Methode als .click, wenn die folgenden Bedingungen erfüllt sind:

• es gibt viele Elemente auf der Seite
• nur ein Ereignis, das für das Klick-Ereignis zu registrieren ist
• Sie machen sich Sorgen um die mobile Leistung/Akkulaufzeit

Ich habe mir diese Meinung gebildet, weil die JavaScript-Engines auf mobilen Geräten 4 bis 7 Mal langsamer sind als ihre Desktop-Pendants, die in der gleichen Generation hergestellt wurden. Ich hasse es, wenn ich eine Website auf meinem mobilen Gerät besuche und einen ruckelnden Bildlauf erhalte, weil jQuery alle Ereignisse auf Kosten der Benutzerfreundlichkeit und der Akkulaufzeit bindet. Ein weiterer neuer unterstützender Faktor, der allerdings nur für Regierungsbehörden von Belang sein sollte ;) Wir hatten ein IE7-Pop-up mit einer Meldung, dass der JavaScript-Prozess zu lange dauert... warten oder den Prozess abbrechen. Das passierte immer dann, wenn es viele Elemente gab, die über jQuery gebunden werden mussten.

Answer 4

Die Trennung der Bereiche 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 Werfen Sie die Idee des deklarativen Markup nicht zu schnell über Bord. Es hat seinen Platz, und mit Frameworks wie Angularjs, ist das Herzstück.

Es muss ein Verständnis dafür herrschen, dass die gesamte <div id="myDiv" onClick="divFunction()">Some Content</div> wurde so stark beschämt, weil es von einigen Entwicklern missbraucht wurde. So erreichte es den Punkt, an dem es zu einem Sakrileg wurde, ähnlich wie tables . Einige Entwickler eigentlich vermeiden tables für tabellarische Daten. Das ist das perfekte Beispiel dafür, dass Menschen handeln, ohne zu verstehen.

Allerdings gefällt mir der Gedanke, mein Verhalten und meine Ansichten voneinander zu trennen. Ich sehe kein Problem mit dem Markup deklariert was es tut (nicht wie er tut es, das ist Verhalten). Es könnte in Form einer tatsächlichen onClick-Attribut, oder ein benutzerdefiniertes Attribut, ähnlich wie Bootstraps Javascript-Komponenten sein.

Auf diese Weise, durch einen Blick nur auf die Markup, können Sie sehen, was tut, anstatt zu versuchen, Reverse-Lookup-Javascript-Ereignis-Bindemittel.

Eine dritte Alternative zu den oben genannten Möglichkeiten ist die Verwendung von Datenattributen, um das Verhalten im Markup deklarativ anzukündigen. Das Verhalten wird aus der Ansicht herausgehalten, aber man kann auf einen Blick 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 Namensraums. Dies kann umgangen werden, indem entweder die dritte Alternative oben oder Frameworks wie Angular und ihre ng-click-Attribute mit automatischem Geltungsbereich verwendet werden.

Answer 5

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

onclick, onmouseover, onmouseout, etc. Ereignisse sind eigentlich schlecht für die Leistung (in Internet Explorer hauptsächlich, stell dir vor). Wenn Sie codieren mit Visual Studio Wenn Sie eine Seite mit diesen Blöcken aufrufen, erzeugt jeder einzelne von ihnen einen separaten SCRIPT-Block, der Speicherplatz beansprucht und somit die Leistung beeinträchtigt.

Außerdem sollten Sie eine Trennung der Konzerne : JavaScript und Layouts sollten getrennt werden!

Es ist immer besser, evenHandler für jedes dieser Ereignisse zu erstellen, da ein Ereignis Hunderte/Tausende von Elementen erfassen kann, anstatt Tausende von separaten Skriptblöcken für jedes einzelne zu erstellen!

(Auch alles, was alle anderen sagen.)