jQuery使用對象的方法作爲事件處理程序

我有一個對象。它初始化一個按鈕以提醒「你好！」當它被點擊時。爲什麼這不工作？jQuery使用對象的方法作爲事件處理程序

HTML

<button>Test</button>

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); 
});

來源

2013-06-28 Don P

您的代碼是沒有意義的！你不能像這樣初始化一個新的對象字面值。如果你想使用'new'並把它看作「構造函數」，你必須使'MyObject'成爲一個函數。否則，'MyObject'是一個對象字面值，你可以靜態地訪問它 - 'MyObject.testValue' – Ian

頭腦風暴@Ian。這使得js對象更有意義，謝謝。 –

每當你把()後面一個函數引用，你是執行功能。您必須將函數引用傳遞給.click，而不是函數返回的內容（除非函數返回要用作事件處理函數的函數）。

例子：

button.click(this.testFunction);

但現在你有另一個問題：在函數內部，this將參考的DOM元素，而不是對象，所以訪問this.testValue將返回undefined。

您可以使用jQuery的$.proxy功能來解決這個問題：

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

現在this將參照對象，你可以通過event.target得到所點擊的元素的引用。

來源

2013-06-28 20:21:02

這是一個對象字面，你通常會使用它像這樣：

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

來源

2013-06-28 20:18:55 adeneo

它得到了警報工作，但仍然警告「未定義」：P –

@DonnyP - 沒有注意到！這是因爲wintin testFunction的作用域，當這種方式被調用時，這個按鈕就是按鈕，而不是對象。您必須直接引用該對象，或將'this'作爲參數傳遞。 – adeneo

有兩個原因：

您正在使用的testFunction()代替testFunction在綁定的事件，所以你會調用該函數並綁定（不確定）的返回值。
當您使用方法作爲函數時，它不再附加到對象，因此在調用回調時上下文不會是對象，而是全局的window對象。

使用proxy方法，使與正確的上下文中調用該方法的函數：

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

來源

2013-06-28 20:21:10 Guffa

感謝Guffa，是否可以使用.bind（this）而不是$ .proxy（）？ –

@DonnyP是的，他們完成同樣的事情 – Ian

@DonnyP：是的，但是這並不適用於所有瀏覽器。這就是爲什麼'代理'在那裏。 – Guffa

jQuery使用對象的方法作爲事件處理程序

回答

相關問題