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

Question

只是我一直在想的东西.在方法的第二个参数中.addEventListener,您可以调用"(自定义)类方法"而不是函数吗？

即以下工作会是什么？

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

Answer 1

我只是尝试了一种更直接的方法，它似乎有效，而且我想说它非常干净。我只是bind(this)将论点添加到addEventListener(). 当事情不是这样的时候，不要把事情搞得太复杂……

class HTMLExample extends HTMLElement{
  constructor(){
    super();
    this.count = 0;
    this.addEventListener('click', this.onClick.bind(this), false);        
  }
  
  onClick(event){
    let prevCount = this.count;
    this.count++;    
    let msg = `Increased Count from ${prevCount} to ${this.count}`;
    document.getElementById("log").innerHTML += `${msg}<br/>`;     
  }
}

Answer 2

不,你所写的内容是行不通的,因为method它将在没有object上下文的情况下被调用.在里面method,this将设置为启动事件的DOM元素.

如果要调用方法并保留上下文,请object使用函数关闭变量:

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