如何通过事件委托获取DOM元素所属的类实例？

我来给你拆解具体的实现思路和代码方案，核心就是建立DOM元素与类实例的关联映射，然后通过事件委托的向上查找能力找到对应的实例。

先补全你的类结构示例 #

假设你的Parent和Child类是这样的（基于你给出的代码片段扩展）：

class Parent {
  constructor() {
    this.element = document.createElement('div');
    this.element.setAttribute('class', 'parent');
  }
}

class Child extends Parent {
  constructor(name) {
    super();
    this.name = name; // Child实例的自定义属性
    this.element.classList.add('child');
    this.element.textContent = `点击我：${this.name}`;
    document.body.appendChild(this.element);
  }

  // 给Child加个实例方法，方便后续测试
  sayHi() {
    console.log(`我是Child实例：${this.name}`);
  }
}

// 创建几个测试实例
new Child("小明");
new Child("小红");
new Child("小刚");

方案1：直接给DOM元素绑定实例引用（简单直观） #

这是最容易上手的方式，直接给类创建的DOM元素加一个自定义属性指向实例本身：

class Parent {
  constructor() {
    this.element = document.createElement('div');
    this.element.setAttribute('class', 'parent');
    // 把实例绑定到DOM元素的自定义属性上（下划线开头约定为内部属性）
    this.element._instance = this;
  }
}

// 事件委托实现：监听父容器（比如body）的点击事件
document.body.addEventListener('click', (e) => {
  // 用closest快速找到最近的.parent元素（比手动遍历父元素高效）
  const targetElement = e.target.closest('.parent');
  if (targetElement && targetElement._instance) {
    const instance = targetElement._instance;
    console.log("找到对应的实例：", instance);
    // 可以直接调用实例方法
    if (instance instanceof Child) {
      instance.sayHi();
    }
  }
});

优点：代码简单，无需额外数据结构；缺点：给DOM元素添加了自定义属性，可能和其他代码的属性命名冲突（用下划线开头可以降低冲突概率）。

方案2：用WeakMap存储DOM与实例的映射（优雅安全） #

如果不想污染DOM元素的属性，推荐用WeakMap来存储映射关系——它的键是弱引用，当DOM元素被移除时，对应的实例会自动被垃圾回收，不会造成内存泄漏：

// 全局（或模块内）创建一个WeakMap，存储DOM元素→实例的映射
const elementInstanceMap = new WeakMap();

class Parent {
  constructor() {
    this.element = document.createElement('div');
    this.element.setAttribute('class', 'parent');
    // 将当前实例和DOM元素存入WeakMap
    elementInstanceMap.set(this.element, this);
  }
}

// 事件委托实现
document.body.addEventListener('click', (e) => {
  const targetElement = e.target.closest('.parent');
  if (targetElement) {
    const instance = elementInstanceMap.get(targetElement);
    if (instance) {
      console.log("找到对应的实例：", instance);
      if (instance instanceof Child) {
        instance.sayHi();
      }
    }
  }
});

优点：不污染DOM，内存安全；缺点：需要额外维护一个WeakMap（但这个成本非常低）。

关键注意点 #

• 用Element.closest()方法可以快速找到最近的目标祖先元素，比手动循环parentElement更简洁高效，是事件委托中查找元素的首选方法。
• 如果你的类实例对应的DOM元素有统一的标识（比如类名.parent），一定要在查找时结合这个标识，避免误匹配其他元素。
• 如果Child类的DOM元素可能嵌套子元素（比如.child里面有<span>），closest()也能正确找到外层的.parent元素，完美适配事件委托场景。

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