Javascript - 添加事件监听器时未定义的数组元素

Question

我是 javascript 的新手，我正在尝试获取 DOM 中的所有“td”元素并向它们添加点击事件。当代码完成执行时，我可以看到单元格数组中有 37 个元素，但是当我单击该元素时，无论单击哪个元素，我的控制台语句中都会显示“clicked td37 undefined”。我不知道出了什么问题，我们将不胜感激。

<script>
window.addEventListener("DOMContentLoaded", createEventListeners, false);

function createEventListeners() {
   var cells = document.getElementsByTagName("td");
   console.log(cells);

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

      }, false);
   }

 }
</script>

Answer 1

在循环结束时，i 的值将是cells.length，所以cells[i] 是未定义的。您需要将它们包装在一个函数中，以便 i 是您想要的值。阅读更多关于闭包的信息 here

function createEventListeners() {
  var cells = document.getElementsByTagName("td");

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