如何在初始化函数中将原型函数添加到事件侦听器？

我不知道到底如何短语我的问题，所以让我来举一个例子：如何在初始化函数中将原型函数添加到事件侦听器？

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

如何在初始化函数中将原型函数添加到事件侦听器？

回答

相关问题