3

ここからコード スニッパーを受け取りました: http://jsdude.wordpress.com/2012/12/19/jquery-event-callbacks-and-javascript-oop-methods/ :

 var CounterButton = function(el){
    this.$el = $(el);
    this.counter = 0;
    this.bindEvents();
    this.myVal = 1;
}

CounterButton.prototype.bindEvents = function(){
    this.$el.click(this.clicked);
};

CounterButton.prototype.clicked = function(){
    this.increase();
    this.showMessage();
};

私はこの特定の行を理解しようとしています: his.$el.click(this.clicked);. this関数内にある場合click、それはクリックされているものを参照しますthis.$elか?

4

5 に答える 5

2

これは、クリックされているものを指しますか？$ el？

いいえ。メソッドclicked を保持するオブジェクト内のwhichという名前の関数を参照しています。bindEvents

ただしthis、イベントハンドラーでは、DOMELEMENTを参照します。この単純なコードを考えてみましょう：

$("body").click(this.do1);

function do1()
{
 alert(this.tagName); //BODY     
}

注意してください

$el.click(this.clicked)

のようなものです ：

var that=this;
$el.on('click',function {}(that.clicked()));
于 2013-03-23T19:29:47.183 に答える
0

jQuery では、これは常に、イベント ハンドルがバインドされた DOM 要素 ( http://api.jquery.com/bind/ ) を参照します。

一般的にこれをよりよく理解するために、ここを見ることができます: "this" キーワードはどのように機能しますか?

投稿全体を読むと、この例が間違っている理由がわかります (次のテキストは、リンク先の記事からのものです)。

clicked() メソッドが間違ったコンテキストで呼び出されました。JavaScript の関数呼び出しコンテキストについて聞いたことがない場合は、この素晴らしい記事を読む必要があります。デフォルトでは、jQuery のイベント コールバックのコンテキスト オブジェクトがターゲット HTML 要素です。しかし、これは簡単に修正できます。 bindEvents() メソッドを少し変更するだけです。

CounterButton.prototype.bindEvents = function(){
    this.$el.click($.proxy(this.clicked, this));
};

$.proxy は、関数 (またはスコープ) バインディングの jQuery のバージョンです。このメソッドは、2 番目の引数として指定されたコンテキスト オブジェクトで常に呼び出される新しい関数を返します。詳細については、jQuery の公式ドキュメントを参照してください。

于 2013-03-23T19:52:18.297 に答える
0

this.$el参照: $(el);(var CounterButton = function(el){...)

this.clicked参照:CounterButton.prototype.clicked = function(){...

jQuery では$(el).click、クリックをトリガーまたはリッスンできる関数です。関数が渡されると、要素「el」でのクリックをリッスンし、実行時にその関数を実行します。

ただし、関数「this.clicked」の内部では、何か紛らわしいことが起こります.jQueryはクリックされた要素を関数「this.clicked」に渡すため、「this」はコンストラクターからの「el」です。

CounterButton.prototype.clicked = function(){
    this.increase(); // this refers to the element 'el'
    this.showMessage(); // this refers to the element 'el'
};

彼がこのエラーを受け取る理由は次のとおりです 。

閉鎖を行うことでそれを修正できます：

CounterButton.prototype.clicked = function(){
    var self = this;
    return function () {
        self.increase(); // self refers to CounterButton
        self.showMessage(); // self refers to CounterButton
};

そして、this.clicked を渡す代わりに、this.clicked() を渡します。

 this.$el.click(this.clicked());
于 2013-03-23T19:33:45.420 に答える
0

混同している人もいます。あなたの例から、 jQuery関数内のthis動作とは何の関係もありません。this

コード例の使用法は次のとおりです。

var myButton = new CounterButton(domElement);

これはすべて、コンストラクターが次のようになるためです。this == myButton

于 2013-03-23T20:00:24.293 に答える
0

jQuery イベント ハンドラーの内部に関する元の質問に答えるにはthis: いいえ、クリックされたのは必ずしも要素ではありません。具体的には、 http://api.jquery.com/on/ごとに:

jQuery がハンドラーを呼び出すとき、thisキーワードはイベントが配信される要素への参照です。直接バインドされたイベントの場合、これはイベントが添付された要素であり、委任されたイベントの場合、これは一致する要素selectorです。this(イベントが子孫要素からバブリングした場合、と等しくない場合があることに注意してくださいevent.target。)要素から jQuery オブジェクトを作成して、jQuery メソッドで使用できるようにするには、 を使用します$(this)。

于 2013-03-23T19:42:53.197 に答える