如何在课堂上正确添加内联监听器？

【问题标题】：How to add inline listener in class properly?如何在课堂上正确添加内联监听器？
【发布时间】：2021-11-04 04:31:30
【问题描述】：

在这种情况下，我正在尝试向按钮添加内联侦听器，但我不希望如何正确执行此操作，我想要使用参数，但即使没有它也无法工作：

class App {
  constructor() {
    this.init();
  }

  init() {
    document.body.innerHTML = `
      <button onclick="this.test()">click me</button>
    `;
  }

  test() {
    console.log("test");
  }
}

const app = new App();

【问题讨论】：

标签： javascript class listener

【解决方案1】：

this 在您的内联侦听器中是按钮本身。你需要这样的东西：

class App {
  constructor() {
    this.init();
  }

  init() {
    document.body.innerHTML = `
      <button>click me</button>
    `;
    document.body.querySelector('button').onclick = this.test;
  }

  test() {
    console.log("test");
  }
}

const app = new App();

【讨论】：