如何在HTML标签内绑定事件监听器以调用类中的回调函数？

当然可以直接在<div>标签内调用Container类的fireMe方法，但需要让全局作用域能访问到实例的这个方法——毕竟HTML里的onclick属性默认是在全局作用域执行代码的，而你的fireMe是类的实例方法，只属于当前Container实例。

下面给你两种可行的实现方式：

方法1：将实例挂载到全局作用域 #

你可以把Container的实例赋值给一个全局变量，然后在onclick里通过这个全局变量调用fireMe方法：

class Container {
  constructor(hook) {
    this.hook = "#" + hook;
    this.addDiv = this.addDiv.bind(this);
    this.fireMe = this.fireMe.bind(this);
    this.init = this.init.bind(this);
    // 将当前实例挂载到全局window对象上
    window.containerInstance = this;
    this.init();
  }
  addDiv() {
    // 在onclick里通过全局实例调用fireMe
    const div = `<div onclick="containerInstance.fireMe()">FIRE ME</div>`;
    document.querySelector(this.hook).innerHTML = div;
  }
  fireMe() {
    console.log("hello!");
  }
  init() {
    this.addDiv();
  }
}
let div = new Container("app");

注意：如果页面上会创建多个Container实例，这种方式会覆盖全局变量，导致只有最后一个实例能响应点击。可以改用命名空间或者给每个实例生成唯一标识来避免冲突。

方法2：将实例方法绑定为全局函数 #

你也可以给每个实例的fireMe方法创建一个全局唯一的函数引用，然后在onclick里调用这个全局函数：

class Container {
  constructor(hook) {
    this.hook = "#" + hook;
    this.addDiv = this.addDiv.bind(this);
    this.fireMe = this.fireMe.bind(this);
    this.init = this.init.bind(this);
    // 生成唯一的全局函数名
    this.globalFireMeName = `fireMe_${Date.now()}`;
    // 将绑定好this的fireMe挂载到全局
    window[this.globalFireMeName] = this.fireMe;
    this.init();
  }
  addDiv() {
    // 使用生成的全局函数名
    const div = `<div onclick="${this.globalFireMeName}()">FIRE ME</div>`;
    document.querySelector(this.hook).innerHTML = div;
  }
  fireMe() {
    console.log("hello!");
  }
  init() {
    this.addDiv();
  }
  // 记得在实例销毁时清理全局变量，避免内存泄漏
  destroy() {
    delete window[this.globalFireMeName];
  }
}
let div = new Container("app");

这种方式支持多实例，但需要注意在实例不再使用时清理全局变量，防止内存泄漏。

额外提醒：更推荐的写法 #

虽然上面的方法能实现需求，但直接在HTML标签里写事件绑定会增加耦合性，也不利于维护。更优雅的方式还是你提到的先渲染元素再添加事件监听，比如：

class Container {
  constructor(hook) {
    this.hook = "#" + hook;
    this.addDiv = this.addDiv.bind(this);
    this.fireMe = this.fireMe.bind(this);
    this.init = this.init.bind(this);
    this.init();
  }
  addDiv() {
    const div = document.createElement('div');
    div.textContent = 'FIRE ME';
    // 直接给元素绑定实例方法
    div.addEventListener('click', this.fireMe);
    document.querySelector(this.hook).appendChild(div);
  }
  fireMe() {
    console.log("hello!");
  }
  init() {
    this.addDiv();
  }
}
let div = new Container("app");

这种写法保持了代码的内聚性，也避免了全局作用域的污染，是更符合现代前端开发规范的做法。

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