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

Question

只是我一直想知道的事情。 在 .addEventListener 方法的第二个参数中，可以调用“（自定义） .addEventListener方法”而不是 function 吗？

即会像以下工作吗？

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

Answer 1

不，您编写的内容不起作用，因为该method将在没有object作为其上下文的情况下被调用。 在method内部， this将被设置为启动事件的 DOM 元素。

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

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

Answer 2

我只是尝试了一种更直接的方法，它似乎有效，我会说它很干净。 我只是将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 3

是的。 有可能，只要注意上下文。 例如

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

Answer 4

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

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

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

Answer 5

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

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

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

Answer 6

是的，可以通过绑定来实现。

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

为了创建这个 Web 组件，我创建了一个扩展HTMLElement类的类。 就 JavaScript 而言，这只是另一个常规类。

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

注意：三个点表示“更多代码”到那里。

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

constructor(){
  ...
  this.count = 0;
  ...

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

constructor(){
  ...
  this.count = 0;
  ...
  this.addEventListener('click', this.onClick, false);        
}

onClick(event){
 let prevCount = this.count;
 this.count++;    
 let msg = `Increased Count from ${prevCount} to ${this.count}`;
 document.getElementById("log").innerHTML += `${msg}<br/>`;     
 }

onClick 旨在增加计数器并打印计数器中的先前值和当前值； 但是，这里有问题！！！

问题出在这一行this.count++; . 关键字this不是指HTMLExample类的实例。 原因是使用addEventListener添加的函数会将绑定元素引用为this ，而不是函数或对象。

因此，您必须通过添加以下代码行将addEventListener使用的该函数绑定到您的类的实例：

this.onClick = this.onClick.bind(this);

现在，当您在方法onClick中使用this关键字时， this将引用HTMLExample类的实例。

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

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

 example-component{ cursor: pointer; border: 1px solid black; background: lightgray; padding: 2px; }

 <example-component>Button</example-component> <div id="log"></div>