Javascript 事件冒泡与OOP

我正在尝试使用冒泡事件获取已单击元素的ID

  const _elem = new WeakMap();

  class GetItem {
    constructor(e) {
      _elem.set(this, e);
    }

    eventBubblingTest() {
      const targetElement = _elem.get(this).target;
      return targetElement.parentNode.id;
    }
  }

  document.getElementById('parent').addEventListener('click', () => {
    const clickedID = new GetItem(event);
    alert(clickedID);
  });

目前，我将

[object object]

作为输出。我的问题是为什么我得不到点击的子元素的ID

还有没有更简单的方法来编写click EventListener

---

在当前代码中，您正在警告整个类（您只需创建

GetItem

的一个新实例，然后尝试警告它）。相反，如果要获取

parentNode

，

id

属性，则需要为其调用负责函数。因此，您的代码应该如下所示：

document.getElementById（'parent'）.addEventListener（'click'，（）=>{
const clickedID=新的GetItem（事件）；
警报（单击edid.eventBubblingTest（））；
});

工作演示：

const\u elem=new WeakMap（）；
const parent=document.getElementById（'parent'）；
类GetItem{
建造师（e）{
_元素集（本，e）；
}
eventBubblingTest（）{
const targetElement=_elem.get（this.target）；
返回targetElement.parentNode.id；
}
}
parent.addEventListener（'click'，（）=>{
const clickedID=新的GetItem（事件）；
log（单击edid.eventBubblingTest（））；
});
#父级{
边框：1px实心#f00；
显示器：flex；
对正内容：空间均匀；
}
.产品{
最小宽度：20%；
背景：#ccc；
显示器：flex；
柔性流：柱包裹；
对齐项目：居中；
保证金：5px；
填充：8px；
}
img{
最大宽度：75%；
高度：自动；
}

项目1

购买
项目2

购买
第3项

购买
@Fergoso好吧，因为您正在将事件接口传递到构造函数中并将其用于其他目的，所以不能将其移到事件侦听器之外。除非你改变你的班级结构。