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

Verwendung von $('#myDiv').click(function(){ es besser da es dem Standardmodell der Ereignisregistrierung folgt. (jQuery intern utiliza addEventListener y attachEvent ).

Grundsätzlich ist die Registrierung eines Ereignisses in moderne Art ist die unauffällig Art und Weise der Behandlung von Ereignissen. Um mehr als einen Ereignis-Listener für das Ziel zu registrieren, können Sie auch addEventListener() für dasselbe 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 verwenden? (Von MDN)

addEventListener ist der Weg, um eine Ereignisliste zu registrieren im W3C DOM. Seine 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 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.

Mehr über die Anmeldung zu modernen Veranstaltungen -> http://www.quirksmode.org/js/events_advanced.html

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

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

Oder DOM-Element-Eigenschaften , Beispiel:

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

sind alt und können leicht überschrieben werden.

HTML-Attribut sollte vermieden werden, da es das Markup größer und weniger lesbar macht. Inhaltliche/strukturelle und verhaltensbezogene Aspekte sind nicht klar voneinander getrennt, was das Auffinden von Fehlern erschwert.

Das Problem mit dem DOM-Element-Eigenschaften Methode ist, dass pro Ereignis nur ein Ereignisbehandler an ein Element gebunden werden kann.

Mehr über die traditionelle Ereignisbehandlung -> http://www.quirksmode.org/js/events_tradmod.html

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

Answer 2

Für eine bessere Leistung sollten Sie das native JavaScript verwenden. Für eine schnellere Entwicklung sollten Sie jQuery verwenden. Prüfen Sie den Leistungsvergleich unter jQuery vs. Native Element Leistung .

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

Für Klick-Ereignisse, siehe Native Browser-Ereignisse vs. Jquery-Trigger o jQuery vs. Native Klick-Ereignis-Bindung .

Testen in Chrome 22.0.1229.79 32-bit auf 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

Von dem, was ich verstehe, ist Ihre Frage nicht wirklich darüber, ob jQuery verwenden oder nicht. Es ist eher: Ist es besser, Ereignisse inline in HTML oder über Ereignislisten zu binden?

Die 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 einziges Ereignis binden und diese Bindung später bei Bedarf aufheben. Betrachten Sie diesen reinen JavaScript-Code:

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

Dies funktioniert in den meisten modernen Browsern.

Wenn Sie jedoch bereits jQuery in Ihr Projekt integrieren, verwenden Sie einfach jQuery: .on o .click Funktion.

Answer 4

Entscheiden Sie sich für dieses Modell, da es Ihnen sowohl Standard als auch Leistung bietet.

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

Die zweite Methode besteht aus einfachem JavaScript-Code und ist schneller als jQuery. Aber hier wird die Leistung ungefähr gleich sein.

Answer 5

Sie könnten sie kombinieren, jQuery verwenden, um die Funktion an den Klick zu binden

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

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

function divFunction(){
 //some code
}