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

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;      
    }
  }
});

Answer 2

你可以试试这个：

function sayHello(e) {
  e.target.textContent = "Darth Vader";
}

var buttons = document.querySelectorAll("button");
buttons.forEach(e => e.addEventListener("click", sayHello, false));

<button>Hello</button>
<button>I</button>
<button>Am</button>
<button>Your</button>
<button>Father</button>