Question

我正在开发Electron应用程序，但遇到了麻烦-我不知道如何保持来自同一类方法的多个事件侦听器同时处于活动状态。最后一个侦听器将覆盖所有先前的侦听器。底部有一个示例。我希望所有按钮都可以提醒其ID，而只有最后声明的按钮可以这样做。

搜索过去几个小时没有结果。我觉得应该为这种看似常见的问题提供一个简单的解决方案。

这到底为什么不起作用？是否存在将项目实例存储在队列中的替代解决方案，该方法具有通过单击事件来操纵其数据的方法？

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>

Answer 1

当您像这样更新innerHTML时

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

它删除了所有附加到元素上的东西。因此，这意味着您正在清除所有附加的事件处理程序。

您应该将元素附加到DOM

const button = document.createElement("button")
button.id = this.id
button.textContent = this.id
hook.appendChild(button)

在方法中声明

1 个答案: