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

假设我有一个网格，看起来像这样（单元格内的数字只是用于标记，可能只是空单元格）：

以HTML编写，如下所示：

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

0
1.
2.
3.

我想做两件事：

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

const cells=document.querySelectorAll（'td'）；
对于（变量i=0；i

但是控制台总是在我单击表的任何位置返回值4。我的问题是：

通过在for循环的每个迭代中添加单元格[i].addEventListener，它是否为每个单元格添加事件侦听器

为什么即使单击了单元格[0]、单元格[\1]、单元格[2]或单元格[3]，控制台也总是返回4

我应该如何使控制台返回数组单元格中所需的位置，即如果我单击单元格[0]，返回0；如果我单击单元格[\1]，返回1；如果我单击单元格[2]，返回2；如果我单击单元格[3]，返回3

其次,

我想做的第二件事是根据我从颜色选择器中选择的颜色更改每个单元格的颜色，该颜色由HTML设置：

我是这样做的：

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

const cells=document.querySelectorAll（'td'）；
对于（变量i=0；i

但是细胞的颜色没有改变

我不打算使用jQuery，我只想使用基本JavaScript向每个单元格添加一个事件侦听器。几个小时来我一直在想办法，但最后还是一无所获。有人能帮忙吗？我真的很感激，谢谢

是因为您在回调中使用了“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)
        );

  });
}

const cells=document.querySelectorAll（'td'）；
对于（变量i=0；i{
console.log（event.target.innerText）；//从触发click事件的元素中获取文本节点。
//如果不想使用innerText，可以这样做。
console.log(
//我们将querySelectorAll转换为可遍历数组，然后找到当前事件目标的索引。
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;
  });
}

const cells=document.querySelectorAll（'td'）；
对于（变量i=0；i

---

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

代替

for（变量i=0；i}

有关为什么添加到循环中的事件侦听器都在记录

4

，以及各种修复方法的更多信息，请参阅此问题及其答案，以及几个相关问题：非常感谢！第一种情况只有一个问题，如果单元格中没有文本怎么办？我们不能再使用。innerText，对吗？那么如何打印数组的位置i呢？我已经用另一种方法更新了我的答案以查找索引；）希望这对你有帮助

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