Javascript 当在方法内声明时，eventListener将被重写

我正在开发Electron应用程序，我遇到了一个难题——我不知道如何让来自同一类的方法的多个事件侦听器同时处于活动状态。最后一个侦听器将覆盖之前的所有侦听器。下面有一个例子。我希望所有的按钮都会提醒它们的id，而只有最后声明的按钮才会这样做

谷歌在过去几个小时的搜索没有结果。我觉得应该有一个简单的办法来解决这些看似常见的问题

为什么这不起作用？是否有另一种解决方案可以将项目实例存储在队列中，并通过单击事件处理其数据

类队列{
构造函数（）{
this.list={}；
}
添加（项目）{
此.list[item.id]=项；
}
删除（项目）{
删除此.list[item.id]；
}
}
类项目{
建造师（id）{
this.id=id
}
generateHTML（）{
const hook=document.getElementById（'button-hook'）；
hook.innerHTML+=`${this.id}`；
}
addListener（）{
this.btn=document.getElementById（this.id）；
this.btn.addEventListener（'click'，this.doStuff）；
}
多斯塔夫（）{
警报（this.id）；
}
}
const queue=新队列（）；
const foo=新项目（“foo”）；
foo.generateHTML（）；
foo.addListener（）；
queue.add（foo）；
常量条=新项目（“条”）；
bar.generateHTML（）；
bar.addListener（）；
队列。添加（条）；
const baz=新项目（“baz”）；
generateHTML（）；
addListener（）；
添加（baz）
当您像这样更新innerHTML时

hook.innerHTML += `<button id="${this.id}">${this.id}</button>`;

当您像这样更新innerHTML时

hook.innerHTML += `<button id="${this.id}">${this.id}</button>`;

修改
innerHTML
属性将删除整个HTML并从头重写。因此，您将删除并重新创建每个元素。修改
innerHTML
属性将删除整个HTML并从头重写它。因此，您要删除每个元素，然后重新创建它。