javascript - 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 将返回 未定义。

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

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

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