使用ClickListener创建多个按钮并确定单击了哪个按钮？(JavaScript)

Question

想想Uno卡片游戏的逻辑，例如，当我通过点击抽签按钮在玩家手上动态创建卡片时，我如何在玩家手中获得被点击的卡片？

类似于：

var btn = document.createElement("BUTTON");
btn.onclick = () => {
  alert(btnCounter);
}
btnCounter++;

但是onclick函数应该只写一次，然后为这个按钮保存。

Answer 1

一种选择是依赖于事件冒泡。我们可以将事件侦听器添加到手部的容器中，然后在单击时，确保单击的元素是一个按钮。在本例中，我将我们的卡的值放在按钮的数据集中，但是您可以从目标上的任何位置获取信息。

​

const hand = document.querySelector("#hand");

hand.addEventListener("click", function(e) {
  if (e.target.tagName !== "BUTTON") return;
  console.log(e.target.dataset.card);
});

function drawCards(numberOfCards) {
  for (let i = 0; i < numberOfCards; i++) {
    const button = document.createElement("button");
    const card = Math.floor(Math.random() * 10);
    button.setAttribute("data-card", card);
    button.innerHTML = card;
    hand.appendChild(button);
  }
};

drawCards(5);

<div id="hand"></div>

​

Answer 2

在创建按钮(及其id)的上下文中，将id绑定到o点函数中...

​

const ids = ['1', '2', '3'];
var parent = document.getElementById('parent')

ids.map(id => {
  let btn = document.createElement('button');
  btn.setAttribute('id', id)
  btn.innerHTML = `Button ${id}`
  parent.appendChild(btn)
  btn.onclick = event => {
    alert(id)
  }
})

<div id="parent">
</div>

​