如何在初始化函數中將原型函數添加到事件偵聽器？

我不知道到底如何短語我的問題，所以讓我來舉一個例子：如何在初始化函數中將原型函數添加到事件偵聽器？

function foo() { 
    window.addEventListener("keydown", function(event) { 
     bar(event.keycode); 
} 

foo.prototype.bar = function (keycode) { 
//code 
}

我使用嘗試過，但導致使用window爲this。有沒有辦法做到這一點，或者我將不得不手動調用另一個初始化方法？

來源

2012-07-06 Bloodyaugust

綁定this.bar到this然後再通過它。

function foo() { 
    window.addEventListener("keydown", this.bar.bind(this), false); 
} 


foo.prototype.bar = function (event) { 
    console.log(event.keyCode); 
}

演示http://jsfiddle.net/2tee4/

來源

2012-07-06 14:31:05 Esailija

爲什麼綁定？ 'window.addEventListener（「keydown」，this.bar，false）;'？ – 2012-07-06 14:37:14

@SheikhHeera，這樣'''在'this'的上下文中被調用，否則它將在全局範圍內執行，並且不會是綁定原型函數的優勢。 – zzzzBov 2012-07-06 14:38:21

@SheikhHeera無論綁定函數如何被調用，''bind''都將這個值固定爲始終相同。在這種情況下，它將始終是'foo'對象。 – Esailija 2012-07-06 14:39:25

如果你沒有Function.prototype.bind可*，和你不願意額外的功能添加到Function.prototype將關閉在調用this.bar另一種解決方案：

function foo() { 
    var self; 
    self = this; 
    window.addEventListener('keydown', function (e) { 
     self.bar(e); 
    }, false); 
} 
foo.prototype.bar = function (e) { 
    console.log(e.keyCode); 
}

_{*雖然您使用addEventListener而不是attachEvent導致我相信Function.prototype.bind將是一個配音PTABLE選擇}

此外，圖書館等jQuery可以包括它們自己的bind形式，jQuery的是jQuery.proxy。

來源

2012-07-06 14:44:42 zzzzBov

感謝您的額外選擇，獲取更多信息總是令人愉快的。更何況，當這成爲谷歌搜索結果爲其他人... – Bloodyaugust 2012-07-06 14:56:54

如果你的目的是爲了添加新的偵聽每創建foo，另一種選擇是讓foo實施事件監聽接口，以及簡單地傳遞this到位的處理程序。

function Foo() { 
    window.addEventListener("keydown", this, false); 
} 

Foo.prototype.bar = "foobar"; 

Foo.prototype.handleEvent = function(e) { 
    console.log(e.type); // "mousedown" (for example) 
    console.log(this.bar); // "foobar" 
}; 

new Foo();

注意，這僅與addEventListener()工作。

DEMO：http://jsfiddle.net/k93Pr/

來源

2012-07-06 14:49:03

+1，這將是真棒，如果jQuery支持這一點，將爲我擺脫了很多'$。代理'樣板:) – Esailija 2012-07-06 14:52:09

自從上面的評論被髮布後，我會連接我的票：http://bugs.jquery.com/ticket/12031：P – Esailija 2012-07-06 15:38:12

@Esailija：看看他們是否實施它會很有趣。我不會等待jQuery。只需將其製作成插件。這是一個簡單的，也許天真的初始實現。只需要添加對'.on（）'的其他簽名的支持。 http://jsfiddle.net/suQEZ/ *（我知道你不需要我告訴你怎麼做，更多的是爲了別人。）* – 2012-07-06 17:14:41

如何在初始化函數中將原型函數添加到事件偵聽器？

回答

相關問題