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

Die erste Methode der Verwendung onclick ist nicht jQuery, sondern einfach Javascript, so dass Sie nicht den Overhead von jQuery erhalten. Die jQuery-Weise kann über Selektoren erweitert werden, wenn Sie es zu anderen Elementen hinzufügen müssen, ohne den Event-Handler zu jedem Element hinzuzufügen, aber wie Sie es jetzt haben, ist es nur eine Frage, ob Sie jQuery verwenden müssen oder nicht.

Persönlich, da Sie mit jQuery Ich würde mit ihm bleiben, wie es konsistent ist und tut entkoppeln das Markup aus dem Skript.

Answer 2

Die erste Methode ist zu bevorzugen. Sie verwendet die fortschrittliche Modelle für die Veranstaltungsregistrierung [s] Das bedeutet, dass Sie mehrere Handler an dasselbe Element anhängen können. Sie können leicht auf das Ereignisobjekt zugreifen, und der Handler kann im Bereich einer beliebigen Funktion liegen. Außerdem ist er dynamisch, d. h. er kann jederzeit aufgerufen werden und eignet sich besonders gut 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 Namensraums führt) und vermischt den Inhalt/die Struktur (HTML) mit dem Verhalten (JavaScript). Verwenden Sie das nicht.

Ihre Frage nach Leistung oder Standards lässt sich nicht so einfach beantworten. Die beiden Methoden sind einfach völlig unterschiedlich und bewirken unterschiedliche Dinge. Die erste ist mächtiger, während die zweite verachtet wird (als schlechter Stil).

Answer 3

Angenommen, Sie haben eine Schaltfläche innerhalb eines von Javascript/Jquery generierten HTML-Elements (die .html() oder .innerHTML-Elemente) verschachtelt, dann müssen Sie zuerst das äußerste Element (parent) auswählen und Folgendes tun

var parentElement = $('#outermostElement')
 parentElement.click('button', function(){
    console.log('clicked')
}) 

Mit dem äußersten Element meine ich das Element, das die .html() einbettet, z.B.

outermostElement.html("<div><button>click<button><div>")