5

これは、jQuery を使用して JavaScript でオブジェクトのメソッドに適切にバインドおよびイベントする方法ですか?

サンプルコードを少し用意したのですが、気になるのはコメント「is this ok?」の後の2行です。

もちろん、コールバックはオブジェクトのメソッドであるため、コンテキストが同じままである必要があります。

function MyPrototype(id) {

    this.id = id;
    this.sel = '#' + id;

    // *** IS THIS OK? ***
    $(this.sel).on('click', function(evt) {
        MyPrototype.prototype.mouseClick.call(this, evt); });
}

MyPrototype.prototype.mouseClick = function (evt) {

    // I want to use evt to get info about the event
    // I want use this to access properties and methods of the instance

    alert(this.id + ' was clicked');
}

myObject1 = new MyPrototype('myDiv1');
myObject2 = new MyPrototype('myDiv2');

また、特定の関数からイベントをバインド解除する必要が生じる場合があります。

しかし、以下は機能していません...

MyPrototype.prototype.unbindClick = function() {

    $(this.sel).off('click', function(evt) {
        MyPrototype.prototype.mouseClick.call(this, evt); });
}

myObject2.unbindClick();

イベント ハンドラーとしてインライン関数を渡していることに注意してください。

4

2 に答える 2

2

jQuery.proxyを試してください：

function MyPrototype(id) {
    this.id = id;
    this.sel = '#' + id;

    // using jQuery.proxy:
    $(this.sel).on('click', $.proxy(this.mouseClick, this));

    // or Function.bind:
    // $(this.sel).on('click', this.mouseClick.bind(this));

    // or writing it out:
    /*
    var self = this;
    $(this.sel).on('click', function () {
      return self.mouseClick.apply(self, arguments);
    });
    */
}

MyPrototype.prototype.mouseClick = function(evt) {

    // I want to use evt to get info about the event
    // I want use this to access properties and methods of the instance

    console.log(this.id + ' was clicked');
};

var myObject1 = new MyPrototype('myDiv1');
var myObject2 = new MyPrototype('myDiv2');

http://jsbin.com/axokuz/1/

質問の更新について：

単一のイベントハンドラーのバインドを解除する場合は、バインド中に使用されるのとまったく同じハンドラー関数が必要になります。そうしないと、イベント全体がバインドされなくなります。$.proxyあなたが質問に追加した解決策も、それを助けることもありません。ただし、いくつかの解決策があります。

  • バインドされたハンドラーへの参照を保持し、バインドを解除するときにそれを使用します
  • jQueryの名前空間イベントを使用する
于 2013-01-15T10:33:32.540 に答える
0

特定のイベントの特定の要素から特定のハンドラをバインド解除できるようにするには、バインド解除時にアクセスされるオブジェクトのプロパティに jQuery のプロキシ オブジェクトを保存する必要があります。

このような

function MyPrototype(id) {
    this.id = id;
    this.sel = '#' + id;
    this.handler = $.proxy(this.mouseClick, this);

    $(this.sel).on('click', this.handler);
};

MyPrototype.prototype.mouseClick = function(evt) {

    console.log(this.id + ' was clicked');
};

MyPrototype.prototype.unbindClick = function() {

    $(this.sel).off('click', this.handler);
};
于 2013-01-15T17:13:45.417 に答える