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

时间:2012-07-06 14:27:54

标签: javascript html oop prototype

我不确定如何说出我的问题,所以让我举一个例子:

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

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

我已尝试使用this.bar(),但这会导致window使用this。有没有办法做到这一点,还是我必须手动调用另一个初始化方法?

3 个答案:

答案 0 :(得分:7)

在传递之前将this.bar绑定到this

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


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

demo http://jsfiddle.net/2tee4/

答案 1 :(得分:5)

如果您没有Function.prototype.bind可用*,并且您不愿意向Function.prototype添加额外功能,那么另一种解决方案就是关闭对this.bar的调用:< / p>

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是可以接受的选择


此外,jQuery等库可能包含自己的bind形式,jQuery是jQuery.proxy

答案 2 :(得分:4)

如果您打算为每个创建的foo添加一个新的侦听器,另一个选项是让foo实现 EventListener 接口,并简单地传递{{1}代替处理程序。

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

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