jQuery.click () vs onClick

Mit $('#myDiv').click(function(){ ist besser wie folgt standard-event-Registrierung-Modell. (jQuery intern verwendet addEventListener () und attachEvent).

Grundsätzlich die Registrierung einer Veranstaltung in moderne Art ist die unauffällig Umgang mit events. Auch die Registrierung mehr als einen Ereignis-listener für das Ziel, das Sie nennen können addEventListener() für das gleiche Ziel.

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? (Von MDN)

addEventListener ist der Weg zur Registrierung eines Ereignis-Listeners als angegeben
das W3C-DOM. Seine Vorteile sind wie folgt:

• Es ermöglicht das hinzufügen von mehr als einen einzigen handler für ein Ereignis. Dies ist besonders nützlich für DHTML-Bibliotheken oder Mozilla-Erweiterungen, die
  müssen gut funktionieren, auch wenn andere Bibliotheken/Erweiterungen verwendet werden.
• Es gibt Sie feiner Granulierte Kontrolle der phase, wenn der listener aktiviert wird (Aufnahme vs. Blasenbildung)
• Es funktioniert auf jedem DOM-element, nicht nur HTML-Elemente.

Mehr über Moderne event-Registrierung -> http://www.quirksmode.org/js/events_advanced.html

Andere Methoden wie die Einstellung der HTML-Attribute, Beispiel:

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

Oder DOM-Elemente-Eigenschaften, Beispiel:

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

alt sind und Sie können über leicht geschrieben.

HTML-Attribut sollten vermieden werden, da Es macht das markup größer und weniger lesbar. Bedenken von Inhalt/Struktur und Verhalten sind nicht gut voneinander getrennt, was ein Fehler schwerer zu finden.

Das problem mit der DOM-element Eigenschaften Methode ist, dass nur ein event-handler gebunden werden können, um ein element pro Veranstaltung.

Mehr über das Traditionelle event-handling -> http://www.quirksmode.org/js/events_tradmod.html

MDN Referenz: https://developer.mozilla.org/en-US/docs/DOM/event

InformationsquelleAutor der Antwort Selvakumar Arumugam

Aus, was ich verstehe, deine Frage nicht wirklich, ob jQuery verwenden oder nicht. Es ist eher: Ist es besser, sich zu binden-events "inline" im HTML-oder durch Ereignis-Listener?

Inline-Bindung ist veraltet. Darüber hinaus diese Weise können Sie nur binden, eine Funktion zu einem bestimmten Ereignis.

Daher empfehle ich die Verwendung von Ereignis-Listener. Auf diese Weise werden Sie in der Lage sein zu binden, viele Funktionen auf ein einzelnes Ereignis und trennen Sie Sie später, wenn nötig. Betrachten Sie dieses Reine JavaScript-code:

querySelector('#myDiv').addEventListener('click', function () {
    //Some code...
});

Dies funktioniert in den meisten modernen Browsern.

Jedoch, wenn Sie bereits unter anderem jQuery in Ihr Projekt — nutzen Sie einfach jQuery: .on oder .click Funktion.

InformationsquelleAutor der Antwort

Könnte man kombinieren, jQuery verwenden, binden Sie die Funktion, um die klicken Sie auf

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

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

function divFunction(){
 //some code
}

InformationsquelleAutor der Antwort CaffGeek

IMHO, onclick, ist die bevorzugte Methode über .klicken Sie nur, wenn folgende Bedingungen erfüllt sind:

• es gibt viele Elemente auf der Seite
• nur ein Ereignis registriert werden, für das click-Ereignis
• Sie sind besorgt über mobile performance/Akkulaufzeit

Gründete ich diese Meinung aufgrund der Tatsache, dass die JavaScript-engines, die auf mobilen Geräten sind 4 bis 7 mal langsamer als Ihre desktop-Pendants, die in der gleichen generation. Ich hasse es, wenn ich auf eine Website auf meinem mobilen Gerät und erhalten hibbelig scrollen, weil das jQuery ist verbindlich, alle Veranstaltungen zu Lasten meines Benutzerfreundlichkeit und Lebensdauer der Batterie. Ein weiteres Aktuelles unterstützenden Faktor, obwohl dies nur ein Anliegen mit staatlichen stellen 😉 , wir hatten IE7 pop-up-Meldung, die besagt, dass JavaScript ist zu lang...warten oder Abbrechen Prozess. Dies geschah jedes mal gab es eine Menge von Elementen zu binden, um über jQuery.

InformationsquelleAutor der Antwort Thomas Vanderhoof

Trennung von Belangen ist der Schlüssel hier, und so ist die Veranstaltung verbindlich ist die allgemein anerkannte Methode. Dies ist im Grunde das, was viele der vorhandenen Antworten gesagt haben.

Jedoch nicht wegwerfen die Idee der deklarativen markup zu schnell. Es hat seinen Platz, und mit frameworks wie Angularjs, ist das Herzstück.

Kann, braucht es ein Verständnis, dass die ganze <div id="myDiv" onClick="divFunction()">Some Content</div> war beschämt so stark, weil es missbraucht wurde, indem einige Entwickler. So erreichte er den Punkt, von frevelhaften Proportionen, ähnlich wie tables. Einige Entwickler eigentlich vermeiden tables für tabellarische Daten. Es ist das perfekte Beispiel für Menschen, die handeln ohne zu verstehen.

Obwohl ich mag die Idee des Haltens mein Verhalten trennen von meinen Ansichten. Ich sehe kein Problem mit der markup-Deklaration was es tut (nicht wie Sie es tut, das ist-Verhalten). Es könnte sein, in form einer tatsächlichen onClick-Attribut, oder ein benutzerdefiniertes Attribut, das viel wie Stiefelriemen javascript-Komponenten.

Diese Weise, durch einen Blick nur auf das markup, können Sie sehen, was funktioniert, anstatt zu versuchen, reverse-lookup-javascript-event-Bindemittel.

So, als Dritte alternative zu den oben genannten, unter Verwendung von Daten Attribute declarativly verkünden, das Verhalten innerhalb des Markups. Verhalten gehalten wird, aus der Ansicht, sondern auf einen Blick können Sie sehen, was passiert ist.

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 Haupt-Nachteil, mit dem zweiten Beispiel ist die Verschmutzung der globalen namespace. Dies kann umgangen werden, indem entweder die Dritte alternative vor, oder frameworks wie Angular und Ihre ng-klicken Sie auf Attribute automatisch mit Umfang.

InformationsquelleAutor der Antwort Chris

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

onclick, onmouseover, onmouseout, etc. events sind eigentlich schlecht für die performance (in Internet Explorer vor allem, gehen Sie Abbildung). Wenn Sie den code mit Visual Studio, wenn Sie führen Sie eine Seite mit diesen, jeder einzelne von diesen wird eine separate SKRIPT-block unter Speicher, und dadurch verlangsamt sich die Leistung.

Nicht zu erwähnen, sollten Sie eine Trennung der Anliegen: JavaScript-und Layout getrennt werden sollte!

Es ist immer besser, zu erstellen evenHandlers für jedes dieser Ereignisse ist ein Ereignis erfassen kann Hunderte/Tausende von Artikeln, erstellen, anstatt Tausende von script-Blöcke für jeden!

(Auch, alles, was alle anderen sagen.)

InformationsquelleAutor der Antwort Mark Pieszak - DevHelp.Online

Meisten der Zeit, native JavaScript-Methoden sind eine bessere Wahl über jQuery bei der Leistung ist das einzige Kriterium, aber jQuery macht JavaScript und ermöglicht die Entwicklung leicht. Sie können jQuery verwenden, da es nicht beeinträchtigen die Leistung zu viel. In Ihrem speziellen Fall, der Unterschied der Leistung ist vernachlässigbar.

InformationsquelleAutor der Antwort Adil

Die erste Methode ist zu bevorzugen. Es verwendet die erweiterte event-Registrierung-Modell[s], was bedeutet, dass Sie anfügen können mehrere Handler auf das gleiche element. Sie können ganz einfach Zugriff auf das event-Objekt, und der handler kann Leben in jeder Funktion Gültigkeitsbereich. Auch, es ist dynamisch, ich.e es kann jederzeit aufgerufen werden und ist besonders gut geeignet für dynamisch generierte Elemente. Ob Sie jQuery verwenden, eine andere Bibliothek oder die nativen Methoden direkt nicht wirklich wichtig.

Die zweite Methode, die Verwendung von inline-Attribute, braucht eine Menge von globalen Funktionen (die führt, um namespace pollution) und mischt den Inhalt/Struktur (HTML) mit dem Verhalten (JavaScript). Verwenden Sie nicht, dass.

Ihre Frage über Leistung oder standards kann nicht leicht beantwortet werden. Die beiden Methoden sind einfach völlig unterschiedlich, und verschiedene Dinge tun. Die erste ist mächtiger, während die zweite ist, verachtet (als schlechter Stil).

InformationsquelleAutor der Antwort Bergi