Я работаю над приложением Electron и столкнулся со стеной - я не могу понять, как сохранить активными одновременно несколько слушателей событий, полученных из метода одного и того же класса.Последний слушатель отменяет все предыдущие.Ниже приведен пример.Я ожидаю, что все кнопки оповестят их идентификатор, в то время как только последняя объявленная кнопка сделает это.
Поиск в Google в течение последних нескольких часов не дал результата.Я чувствую, что должно быть простое решение для такой, казалось бы, распространенной проблемы.
Почему именно это не работает?Есть ли альтернативное решение для хранения экземпляров элементов в очереди со средствами управления их данными с помощью событий щелчка?
class Queue {
constructor() {
this.list = {};
}
add (item) {
this.list[item.id] = item;
}
remove (item) {
delete this.list[item.id];
}
}
class Item {
constructor(id) {
this.id = id
}
generateHTML () {
const hook = document.getElementById('button-hook');
hook.innerHTML += `<button id="${this.id}">${this.id}</button>`;
}
addListener () {
this.btn = document.getElementById(this.id);
this.btn.addEventListener('click', this.doStuff);
}
doStuff() {
alert(this.id);
}
}
const queue = new Queue();
const foo = new Item('Foo');
foo.generateHTML();
foo.addListener();
queue.add(foo);
const bar = new Item('Bar');
bar.generateHTML();
bar.addListener();
queue.add(bar);
const baz = new Item('Baz');
baz.generateHTML();
baz.addListener();
queue.add(baz);
<body>
<div id="button-hook">
</div>
</body>