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

Question

我有一个对象。它初始化一个按钮以提醒“你好！”当它被点击时。为什么这不工作？

的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

这是一个对象字面，你通常会使用它像这样：

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

Answer 3

有两个原因：

• 您正在使用的testFunction()代替testFunction在绑定的事件，所以你会调用该函数并绑定（不确定）的返回值。

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

使用proxy方法，使与正确的上下文中调用该方法的函数：

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