5

这是使用 jQuery 在 JavaScript 中正确绑定和事件到对象方法的方法吗？

我已经设置了一些示例代码，但我关心的部分是注释后的两行“这样可以吗？ ”

当然，由于回调是对象的方法，我需要上下文保持不变。

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无济于事。不过，有一些解决方案：

于 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 回答