javascript - 如何将点击事件及其位置添加到按钮数组中？

Question

我正在尝试添加一个事件，当我单击按钮时该事件会更改按钮的文本。然而，无论我点击哪一个，它总是会更改最后一个按钮的文本。

首先，我尝试将按钮传递给“pulsar”方法，并且总是最后一个按钮发生变化。我认为这可能是变量的引用，所以我尝试传递位置，但发生了同样的情况。

class Buscaminas{
    constructor () {
        this.botones = [];
        for (var i = 0; i < 8; i++) {
            for (var j = 0; j < 7; j++) {
                let boton = document.getElementById(i + "" + j);
                boton.textContent = "Hi";
                boton.onclick = e => {
                    this.pulsar(6*i+j);
                }
                this.botones.push(boton);
            }
        }
    }

    pulsar = (n) => {
        console.log(n);
        this.botones[n].textContent = "Bye";
    }
}

console.log 总是打印 55

Answer 1

您的处理方式不正确。

在有很多元素的情况下，您永远不想向每个元素添加一堆单独的事件处理程序。您希望在根节点处创建一个事件处理程序，其中每个子元素的单击事件都会冒泡。

在此示例中，我们有 10 个 div:

<div id="btn-root">
  <input type="button" class="btn" value="1">
  <input type="button" class="btn" value="2">
  <input type="button" class="btn" value="3">
  <input type="button" class="btn" value="4">
  <input type="button" class="btn" value="5">
  <input type="button" class="btn" value="6">
  <input type="button" class="btn" value="7">
  <input type="button" class="btn" value="8">
  <input type="button" class="btn" value="9">
  <input type="button" class="btn" value="10">
</div>

我们有这个简单的代码来监听任何子“.btn”元素的点击:

class Buscaminas {
  constructor() {
    document.querySelector('#btn-root').addEventListener('click', (evt) => {
      evt.target.textContent = Math.random();
    }); 
  }
}

new Buscaminas();

如果您运行该程序，您会发现每次单击其中一个按钮时，其内容都会被替换为随机数。

稍后编辑:

假设您想要查找被单击元素的索引。我们仍然不想为每个元素分配单独的事件处理程序，但我们没有提供父级中目标元素的索引。

为了解决这个问题，我们要搜索 #btn-root 的子节点，直到匹配为止。二进制搜索在这里不起作用，但我们想要比仅执行线性搜索的 indexOf 更好的东西。我们可以做的只是循环数组一半的长度并检查两端。这样我们就可以相当高效地获取索引了。

document.querySelector('#btn-root').addEventListener('click', (ev) => {
  const children = ev.target.parentNode.children;

  for (let i = 0; i < Math.floor(children.length / 2); i++) {
    const lowMatch = ev.target === children[i] && i;
    const highMatch = ev.target === children[children.length - 1 - i] && children.length - 1 - i;
    const index = Number.isInteger(lowMatch) && lowMatch || Number.isInteger(highMatch) && highMatch;

    if (index) {
      ev.target.value = `${index + 1}-${Math.random()}`;
      break;      
    }
  }
});