Javascript 是否可以使用addEventListener调用类方法？

我一直在想。在

.addEventListener

方法的第二个参数中，是否可以调用“（自定义）类方法”而不是函数

i、 你想做以下工作吗

var object = new ClassName();
document.getElementById('x').addEventListener('click', object.method, false);

---

对。这是可能的，只要注意上下文即可。例如

ClassName.prototype.click_handler = function(el) {
    // Here 'this' doesn't refer to the instance
    // of ClassName but to the element clicked
}
var object = new ClassName();

document.getElementById('x').addEventListener('click', object.click_handler, false);

---

不，您所写的将不起作用，因为

方法

将在没有

对象

作为上下文的情况下被调用。在

方法

中，

此

将设置为启动事件的DOM元素

如果要调用该方法并保留上下文，请使用函数关闭

对象

变量：

var object = new ClassName();
document.getElementById('x').addEventListener('click', function () {
  object.method()
}, false);

var object = new ClassName();
document.getElementById('x').addEventListener('click', function (e) {
  object.method(e)
}, false);

---

这里的答案很有帮助，但仍然让我怀疑是否有一个整洁的语法来做基本相同的事情。我不想将类实例的引用传递给它自己，这很奇怪

这里有一个整洁的模式，它将所有内容都保存在类中，不需要使用实例引用，而是使用闭包

myclass= function(){};
myclass.prototype.addSystemEvents = function(){
  var scope = this;
  window.addEventListener( 'resize', function(){scope.onWindowResize();}, false);
}
myclass.prototype.onWindowResize = function(){
   //do whatever
}

---

是的，有可能。您需要调用该方法并保留上下文，使用函数关闭对象变量：

var object = new ClassName();
document.getElementById('x').addEventListener('click', function () {
  object.method()
}, false);

var object = new ClassName();
document.getElementById('x').addEventListener('click', function (e) {
  object.method(e)
}, false);

---

如果在没有内部函数的情况下调用，则“this”将被设置为启动事件的DOM元素。

可以通过执行绑定来执行Yes

下面，我正在创建一个Web组件。大多数浏览器都支持的功能

为了创建这个Web组件，我正在创建一个扩展

HTMLElement

类的类。就JavaScript而言，这只是另一个常规类

现在，我希望我的Web组件的行为像一个按钮。 我希望每次点击我的标签时增加一个计数器

注：三个点表示“更多代码”出现在此处

因此，我创建了一个变量，该变量将保存构造函数中的计数：

constructor（）{
...
此值为0.count；
...

然后，我添加了一个侦听器，用于检测何时单击Web组件并调用方法

onClick

：

constructor（）{
...
此值为0.count；
...
this.addEventListener（'click'，this.onClick，false）；
}
onClick（事件）{
让prevCount=this.count；
这个.count++；
让msg=`将计数从${prevCount}增加到${this.Count}`；
document.getElementById（“log”）.innerHTML+=`${msg}
`；
}

onClick用于增加计数器并在计数器中打印上一个值和当前值；但是，这里有一个问题！！！

问题出在这一行

this.count++；

。关键字

this

没有引用类

HTMLExample

的实例。原因是添加了

addEventListener

的函数将绑定元素引用为

this

，而不是函数或对象

因此，您必须通过添加以下代码行，将

addEventListener

使用的该函数绑定到类的实例：

this.onClick=this.onClick.bind（this）；

现在，当您在方法

onClick

中使用

this

关键字时，

this

将引用类

HTMLExample

的实例

请检查下面的代码并运行它。我认为这样会变得清晰：

类HtmleSample扩展HtmleElement{
构造函数（）{
超级（）；
此值为0.count；
this.onClick=this.onClick.bind（this）；
this.addEventListener（'click'，this.onClick，false）；
}
onClick（事件）{
让prevCount=this.count；
这个.count++；
让msg=`将计数从${prevCount}增加到${this.Count}`；
document.getElementById（“log”）.innerHTML+=`${msg}
`；
}
}
customElements.define（'example-component'，HTMLExample）；

示例组件{
光标：指针；
边框：1px纯黑；
背景：浅灰色；
填充：2px；
}

按钮

@rvighne:你对这个答案做了一个相当彻底的改变。@cookiemonster不是真的。最初的答案很好，但它抛出了一个JavaScript错误（你不能设置实例的原型）.显然我们不能那样做。我相信这正是塞尔吉奥的意图。对。它从根本上改变了答案的含义，使之完全不同。@rvighne谢谢你的编辑建议。我不知道我在想什么！取决于你所说的“工作”.你试过吗？

method

是如何/在哪里定义的？它需要做什么？它可能“起作用”，也可能不起作用。代码刚从我脑子里蹦出来。我没有测试过它。我以前从未接触过JavaScript中的OOP，所以这只是我想知道的事情。那么答案是“可能”。如果

.method

确实是一个函数，它将作为处理程序传递，但在不知道它做什么的情况下，它可能会“工作”，也可能不会“工作”。请注意，没有“自定义类方法”这样的东西.

object.method

仍然是一个普通函数，它与

addEventListener

中的任何其他函数一样。函数与作为属性值分配给它的对象之间没有隐式关系。假设您有

函数foo（）{…}；obj.method=foo；obj2.method2=foo；var bar=foo；

。那么，按照你的逻辑，现在什么是

foo

？它“属于”什么？所谓“自定义类方法”，我指的是内置方法以外的任何东西。因此引用。抱歉，如果这让人困惑的话。+1你可能知道这一点，但为了OP的好处，我还是要评论一下。这不是“上下文”，它是函数的一个参数。对于函数，它是通过调用函数的方式（或通过使用绑定）设置的。它可以设置为任何对象（或严格模式下的任何值）…那么如何删除相同的事件侦听器呢？这是我现在面临的挑战。这为我解决了它：在您的类中：window.addEventListener（“keydown”，（e）=>This.keydown（e））；