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

Don*_*n P 2 javascript oop jquery event-handling javascript-events

我有一个对象.它初始化一个按钮以提醒"你好!" 当它被点击时.为什么这不起作用?

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

HTML

<button>Test</button>
Run Code Online (Sandbox Code Playgroud)

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);
});
Run Code Online (Sandbox Code Playgroud)

Fel*_*ing 10

无论何时放置()函数引用,都要执行该函数.您必须传递函数引用.click,而不是函数返回的内容(除非函数返回您要用作事件处理程序的函数).

例:

button.click(this.testFunction);
Run Code Online (Sandbox Code Playgroud)

但是现在你还有另外一个问题:在函数内部,this将引用DOM元素而不是对象,因此访问this.testValue将返回undefined.

您可以使用jQuery的$.proxy功能来解决这个问题:

button.click($.proxy(this.testFunction, this));
Run Code Online (Sandbox Code Playgroud)

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