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

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. 通过在for循环的每次迭代中添加cell [i] .addEventListener，是否为每个单元格添加一个事件侦听器？
2. 为什么即使单击cells [0]，cells [\\ 1]，cells [2]或cells [3]，控制台也总是返回4？
3. 我应该怎么做才能使控制台返回数组单元格中的所需位置，即如果单击cells [0]，则返回0；如果单击cells [\\ 1]，则返回1；如果单击cells [2]，则返回2。 3如果我单击了单元格[3]？

下一个，

2. 我想做的第二件事是根据我从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”变量。 而且“ 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;
  });
}

现场样本

Answer 2

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

对于后面的示例也是如此...