如何为表格中的每个单元格添加事件侦听器？

Question

假设我有一个如下所示的网格（单元格内的数字仅用于标记，它可能只是空单元格）：

用HTML写成如下：

<table>
      <tr>
        <td>0 </td>
        <td>1 </td>
      </tr>
      <tr>
        <td>2 </td>
        <td>3 </td>
      </tr>
</table>

我想做两件事：

1. 添加一些 JavaScript 代码，在单击每个单元格时将单元格的编号记录到控制台。我是这样做的：

const cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function () {
    console.log(i);
  });
}

但是无论我在哪里单击表格，控制台总是返回值 4。我的问题是：

1. 通过在f​​or循环的每次迭代中添加cells[i].addEventListener，是否会为每个cell添加一个事件监听器？
2. 为什么即使我点击了单元格[0]、单元格[\1]、单元格[2]或单元格[3]，控制台总是返回4？
3. 我应该怎么做才能使控制台返回数组单元格中的所需位置，即如果单击单元格 [0] 则返回 0，如果单击单元格 [\1] 则返回 1，如果单击单元格 [2] 则返回 2 ]，如果我单击单元格[3]，则返回 3？

接下来，

1. 我想做的第二件事是根据我从 HTML 设置的颜色选择器中选择的颜色更改每个单元格的颜色：<input type="color" id="colorPicker">

我是这样做的：

const cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function () {    
    const color = document.querySelector('#colorPicker').value;
    cells[i].style.backgroundColor = color;
  });
}

但是单元格的颜色没有改变。

我不打算使用 jQuery，我只想使用基本的 JavaScript 来为每个单元格添加一个事件监听器。几个小时以来，我一直试图找出一些方法，但最终还是一无所知。有人可以帮忙吗？非常感谢，谢谢！

Answer 1

因为 i 是递增的，所以在 for 循环完成后 i == cells.length。

代替...

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function () {
    console.log(i);
  });
}

使用...

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function (e) {
    console.log(e.target);
  });
}

你的后一个例子也是如此......

Answer 2

是因为您在回调中使用了“i”变量。并且“i”在循环结束时具有值：4，因此当您单击回调时，您的应用会使用最后一个值。

只需通过以下方式更改您的代码：

const cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
  console.log(cells[i].innerText);
  cells[i].addEventListener('click', (event) => {
    console.log(event.target.innerText); // Take the text node from the element who fire the click event.

    // If you don't want to use innerText, you can do like this.
        console.log(
           //We transform querySelectorAll to traversable array. Then we find index of current event target.
           Array.from(document.querySelectorAll('td')).findIndex(e => e === event.target)
        );

  });
}

第二个案例基于 colorPicker ：

const cells = document.querySelectorAll('td');
for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function (event) {    
    const color = document.querySelector('#colorPicker').value;
    event.target.style.backgroundColor = color;
  });
}

live sample