javascript - 如何从其构造函数中定义的 HTML 调用类方法？

Question

class Hello {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
    this.htmlContent = `<a onclick="this.handleClick">Button</a>`;
  }
  handleClick(e) {
    console.log('world');
  }
}

HTML 看起来像:

<div id="main"></div>

“按钮”链接像这样添加到页面:

const myHello = new Hello();
document.getElementById('main').innerHTML = myHello.htmlContent;

但是单击“按钮”不会在控制台中记录“世界”。

或者，这些不起作用:

onclick="()=> this.handleClick()"
onclick="this.handleClick()"

我的猜测是，这只能在 #main 上设置 innerHTML 之后通过 addEventListener 来完成，因为在那之前 myHello.htmlContent 只是一个字符串？

Answer 1

您需要使 HTMLElement 成为 Hello 的一部分，并在 innerHTML by Hello 后尽快绑定(bind)事件处理程序构造函数。

class Hello {
  constructor(ele) {
    this.ele = ele;
    this.handleClick = this.handleClick.bind(this);
    ele.innerHTML = `<a onclick="this.handleClick">Button</a>`;
    ele.querySelector("a").addEventListener( "click", this.handleClick );
  }
  handleClick(e) {
    console.log('world');
  }
}

var ele = document.getElementById('main');
const myHello = new Hello( ele );

<div id="main"></div>