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

How can I add a prototype function to an event listener in the initialization function?

本文关键字：函数 事件 侦听器 添加 原型 初始化      更新时间：2023-09-26

我不确定如何表达我的问题，所以让我举一个例子： 

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

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

在传递之前将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/

如果您

没有可用的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);
}

*尽管您在没有attachEvent的情况下使用addEventListener使我相信Function.prototype.bind将是一个可以接受的选择

此外，诸如jQuery库可以包含自己的bind形式，jQuery的jQuery.proxy。

如果您打算为每个创建的foo添加新侦听器，另一个选项是foo实现 EventListener 接口，并简单地传递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() 。

演示：http://jsfiddle.net/k93Pr/

相关文章：