Korrekte Art der Bindung von Ereignissen mit jQuery

Question

Ich bin etwas neu in Javascript, aber noch grün mit jQuery. Ich bin schon auf etwas gestoßen, das mich am Kopf kratzt.

Was ist der Unterschied zwischen ist:

$('.foo').click(function(){ 
//blah 
}); 

und

$('.foo').onclick = function(){ 
//blah 
} 

Ich ziehe die zweite Art und Weise, aber es scheint nicht zu funktionieren. Mache ich etwas falsch?

Vielen Dank im Voraus.

Answer 1

Mit $('.foo') interagieren Sie mit einem jquery-Wrapper-Objekt (kein HTML-Elementobjekt), das nicht die onclick-Eigenschaft aufweist, die Sie im zweiten Beispiel verwenden möchten.

Im ersten Beispiel kann jquery marshalen, wie diese Funktion an das Ereignis angehängt wird, insbesondere, wenn es auf alles mit der Klasse "foo" angewendet wird.

Wenn die Syntax bequemer ist, könnten Sie:

var myFunction = function() { /* blah */ }; 
$('.foo').click(myFunction); 

Answer 2

Sie vermissen den ganzen Punkt von jQuery. Ihre bevorzugte Methode funktioniert nicht mit jQuery, da jQuery nicht mit einzelnen DOM-Elementen arbeitet. Ein einzelnes DOM-Element hat eine OnClick-Eigenschaft, also wenn Sie so etwas wie dies täte, würde es funktionieren:

document.getElementById('bar').onclick = function() { // blah }; 

jedoch jQuery ist alles über Sets. Beispielsweise versuchen Sie in dem Code, den Sie eingefügt haben, etwas an alle Elemente mit einer Klasse von foo zu binden. Wenn man so etwas macht, muss man nach jQuerys Regeln spielen (und das ist eine gute Sache!). Ein eingepackter Satz, dh $('.foo') ist nicht das gleiche wie direkt bekommen ein DOM-Element wie ich oben getan habe. Es wird jedoch ein Array aller gefundenen DOM-Elemente enthalten, die jQuery verfügbar macht. Also, wenn es ein einzelnes Element mit einer Klasse von foo im Dokument war, Sie konnte tun:

$('.foo')[0].onclick = function() { // blah }; 

Dies wird jedoch nicht als ganze Sinn von jQuery wird empfohlen, abstrakt aus all diesem speziellen Javascript Syntax und lassen Sie jQuery die Dinge für Sie herausfinden. Sie sollten dies begrüßen, da es Ihren Code viel sauberer und portabler macht. Als solche sollten Sie die click oder die bind Funktionen nutzen:

$('.foo').click(function() { 
    // will bind something to all elements with a class of foo 
}); 

$('.foo').bind('click', function() { 
    // functionally identical to the above, either is fine 
}); 

Answer 3

Onclick Eigenschaft kann nur auf DOM-Elemente angebracht werden. $ ('. foo') ist kein DOM-Element. Es ist ein Array-ähnliches jQuery-Objekt. Es kann sich auf ein oder mehrere DOM-Elemente beziehen.

$('.foo')[0].onclick = function() {} 

funktioniert, aber hängt das Ereignis nur an die erste Übereinstimmung an.

$('.foo').click(function(){}) 

verbindet das onclick-Ereignis mit allen übereinstimmenden Elementen. Das aktuelle Element kann durch das Objekt this im Ereignishandler bezeichnet werden.

Einer der Gründe für die Verwendung von jQuery ist die Vermeidung von Nicht-Standard-Code wie oben. Obwohl onclick von allen Browsern unterstützt wird, ist es nicht die Standard-W3C-Methode, Ereignisse anzuhängen.

Answer 4

Ja, Sie machen etwas falsch. Hier ist was:

In jQuery ist $ eine Funktion. Der Einfachheit halber sei gesagt, dass es sich um eine Factory von Objekten vom Typ "jQuery" handelt. So

, wenn Sie schreiben

var temp = $('.foo'); 

Sie erstellen ein Objekt des Typs „jQuery“, die im Grunde eine Sammlung aller DOM-Knoten mit Klasse „foo“ enthält.

Nun hat jedes Objekt seine eigene wohldefinierte Gruppe von Datenelementen und Methoden.

click() ist eine Methode, die eine Funktion als Argument annimmt. Ein Objekt vom Typ "jQuery" hat jedoch kein Mitglied namens "onclick". Also, wenn Sie schreiben:

$('.foo').onclick = function(){ //blah } 

es funktioniert nicht.

jedoch die richtige Methode:

temp.click(function(){ alert("My id is = " + this.id); }); 

arbeiten.

Prost!

jrh.