如何在class中正确添加inline内联事件监听器？

问题根因 #

你写的inline onclick 事件里的this指向的是触发事件的<button> DOM元素，不是你创建的App类实例，自然找不到test方法，所以点击不会触发预期逻辑。

解决方案 #

方案1：推荐使用addEventListener绑定（无需暴露全局变量） #

这是最通用的做法，不管有没有传参需求都适用，也不会污染全局作用域：

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

  init() {
    document.body.innerHTML = `
      <button id="testBtn">click me</button>
    `;
    // 绑定事件，箭头函数会继承外层init方法的this，也就是App实例
    document.querySelector('#testBtn').addEventListener('click', () => {
      // 不带参数调用
      this.test();
      // 带参数调用直接传就行，比如 this.test('参数1', 123)
    })
  }

  test(param1, param2) {
    console.log("test", param1, param2);
  }
}

const app = new App();

方案2：必须用inline内联绑定的处理方式 #

inline事件的执行上下文是全局window，所以你需要把App实例挂载到全局作用域才能访问：

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

  init() {
    // 将当前实例挂载到window全局对象上
    window.myApp = this;
    document.body.innerHTML = `
      <!-- 直接调用全局的myApp实例的方法 -->
      <button onclick="myApp.test()">click me</button>
      <!-- 带参数的写法：<button onclick="myApp.test('字符串参数', 456)">click me</button> -->
    `;
  }

  test(param1, param2) {
    console.log("test", param1, param2);
  }
}

const app = new App();

注意：第二种方案会污染全局作用域，只适合简单 demo 场景，复杂项目优先用第一种方案。

内容的提问来源于stack exchange，提问作者Monfear