jQuery使用对象的方法作为事件处理程序

Question

我有一个对象。它初始化一个按钮，以便在单击时提醒"Hello！"。为什么这不起作用？

jsfiddle：http://jsfiddle.net/kUT52/1/

HTML

<button>Test</button>

JS-

var MyObject = {
  testValue: "Hello!",
  testFunction: function() {
    alert(this.testValue);
  },
  init: function(button) {
    button.click(this.testFunction());
  }
}
$(document).ready(function(){
  var buttonInstance = new MyObject();
  var button = $('button');
  buttonInstance.init(button);
});

Answer 1

无论何时将()放在函数引用后面，都是在执行函数。您必须将函数引用传递给.click，而不是传递函数返回的内容（除非函数返回要用作事件处理程序的函数）。

示例：

button.click(this.testFunction);

但现在您遇到了另一个问题：在函数内部，this将引用DOM元素，而不是对象，因此访问this.testValue将返回undefined。

您可以使用jQuery的$.proxy函数来修复此问题：

button.click($.proxy(this.testFunction, this));

现在this将引用该对象，您可以通过event.target获得对单击的元素的引用。

Answer 2

有两个原因：

• 绑定事件时使用的是testFunction()而不是testFunction，因此将调用函数并绑定（未定义的）返回值。

• 当您将方法用作函数时，它不再附加到对象，因此调用回调时上下文将不是对象，而是全局window对象。

使用proxy方法生成一个函数，该函数调用具有正确上下文的方法：

button.click($.proxy(this.testFunction, this));

Answer 3

这是一个对象文字，您通常会这样使用它：

var MyObject = {
    testValue: "Hello!",
    testFunction: function() {
        alert(MyObject.testValue);
    },
    init: function(button) {
        button.on('click', this.testFunction);
    }
}
var button = $('button');
MyObject.init(button);

FIDDLE

或通过物体：

var MyObject = {
    testValue: "Hello!",
    testFunction: function(e) {
        alert(e.data.obj.testValue);
    },
    init: function(button) {
        button.on('click', {obj: this}, this.testFunction);
    }
}
var button = $('button');
MyObject.init(button);

FIDDLE