jQueryでイベントをバインドする適切な方法

Question

私はJavascriptを少し新しくしましたが、jQueryではさらに緑色です。私はすでに私の頭を傷つけている何かを見つけました。

の違いは何ですか：

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

と

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

は、私は2番目の道を好むが、動作するようには思えません。私は何か間違っているのですか？

ありがとうございます。

Answer 1

$('.foo')では、2番目の例で使用しようとしているonclickプロパティを持たないjqueryラッパーオブジェクト（HTML要素オブジェクトではありません）とやり取りしています。

最初の例では、jqueryはその関数がイベントにどのようにフックアップされるかをマーシャリングすることができます。特にクラス "foo"を持つすべてのものに適用することができます。構文がより快適である場合

、あなたはできます

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

Answer 2

あなたはjQueryのの全体のポイントを逃しています。 jQueryは単一のDOM要素で動作しないため、jQueryでは使用しないメソッドを使用できません。単一のDOM要素はonclickの性質を持っているので、あなたがこのような何かをした場合、それは動作します：

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

しかし、jQueryのは、すべてについてセットです。たとえば、貼り付けたコードでは、何かをすべての要素にバインドしようとしています（クラスはfooです）。このようなことをしているときは、jQueryのルールでプレイする必要があります（これは良いことです！）。ラップされたセット、つまり$('.foo')はではなく、で、上記のようにDOM要素を直接取得するのと同じです。しかし、はになりますが、jQueryが公開しているすべてのDOM要素の配列が含まれています。ドキュメント内のfooのクラスを持つ単一の要素があったのであれば、あなたは行うことができ：

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

これ

は、しかし、jQueryのの全体のポイントとしては推奨されないうち抽象すべてこの特定のJavascriptにされ構文とjQueryの事をあなたのために考えさせる。あなたのコードをもっときれいにして移植性にするので、これを受け入れるべきです。そのように、あなたはclickやbind機能を使用する必要があります。

$('.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プロパティは、DOM要素に取り付けることができます。 $（ '。foo'）はDOM要素ではありません。それは配列のようなjQueryオブジェクトです。 1つまたは複数のDOM要素を参照できます。

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

イベントは最初の一致にのみ作用しますが、イベントは最初の一致にのみ関連付けられます。

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

は、一致するすべての要素にonclickイベントを付加します。現在の要素は、イベントハンドラ内のthisオブジェクトで参照できます。

jQueryを使用する理由は、上記のような非標準コードを避けることです。 onclickはすべてのブラウザでサポートされていますが、標準的なW3C推奨のイベント接続方法ではありません。

Answer 4

はい、間違っています。ここにあるもの：

jQueryでは、$は関数です。簡単にするために、それは "jQuery"型のオブジェクトのファクトリです。

あなたは

var temp = $('.foo'); 

を書くときですから、基本的には、クラス「foo」という持つすべてのDOMノードのコレクションが含まれていることを、「jQueryのを」型のオブジェクトを作成しています。

各オブジェクトには、明確に定義されたデータメンバーとメソッドのセットがあります。

click（）は、関数を引数としてとるメソッドです。 しかし、 "jQuery"型のオブジェクトには "onclick"というメンバはありません。だからあなたが書くとき：

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

それは動作しません。

しかし、適切な方法：

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

が動作します。

乾杯！

jrh。