如何在JavaScript类内部为HTML元素添加事件监听器调用类内方法

你遇到的问题是两个低级错误导致的，修正后就能正常工作：

错误点分析 #

1. 事件名写错：addEventListener的事件名不需要加on前缀，你写的"onmouseover"是HTML属性的写法，标准事件名应该是"mouseover"
2. 回调函数传递错误：比如this.showToolTip()这种写法会立即执行方法，并把返回值（通常是undefined）传给监听器，而不是把方法本身作为回调

修正后的完整代码 #

class ToolTip {
  constructor() {
    this.#abortController = new AbortController();
    // 可以在构造函数里启动，也可以实例化后手动调用start
    this.start();
  }

  #abortController;

  start() {
    console.log("in tooltip start function");
    // 写法1：箭头函数自动绑定this
    document.body.addEventListener("mouseover", (evt) => {
      this.showToolTip(evt);
    }, { signal: this.#abortController.signal });

    // 写法2：用bind绑定this（和箭头函数效果一致）
    // document.body.addEventListener("mouseover", this.showToolTip.bind(this), { signal: this.#abortController.signal });
  }

  showToolTip(evt) {
    // 这里写你的tooltip核心逻辑
    console.log("触发tooltip", evt.target);
    // 比如获取元素的data-tooltip属性，创建提示框等
  }

  // 可选：添加销毁方法，用于清理事件监听
  destroy() {
    this.#abortController.abort();
  }
}

// 使用方式
const tt = new ToolTip();
// 不需要在body标签上写onmouseover="tt.showToolTip(event)"了

关键说明 #

• 箭头函数会自动捕获当前类实例的this，所以在回调里调用this.showToolTip时，this指向的是Tooltip实例，而不是触发事件的body元素
• bind(this)也能实现同样的this绑定效果，两种写法选一种就行
• 你的bind写法本身是对的，但因为事件名写错了onmouseover，所以一直没触发
• 用AbortController可以方便地一次性取消所有事件监听，避免内存泄漏

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