addEventListener() - JAVASCRIPT 中 console.log() 的异常行为

Question

我正在尝试创建带有彩色方块的网页，并希望单击任何方块时，其颜色应显示在输出中。

addEventListener(( 内部的 console.log(( 给出了未定义的输出，我希望它是 rgb 代码，如 colors[]。

而 addEventListener(( 上面的 console.log(( 正在按预期工作。

我认为我们无法访问在addEventListener((内单击的方形数组索引。

var colors = [
	"rgb(25, 0, 0)",
	"rgb(10, 255, 0)",
	"rgb(30, 0, 255)",
	"rgb(55, 255, 0)",
	"rgb(52, 0, 25)",
	"rgb(60, 25, 255)"
]
var squares = document.getElementsByClassName("squares");
for (var i = 0; i < colors.length; i++) {
	squares[i].style.backgroundColor = colors[i];
	console.log(colors[i]);
	squares[i].addEventListener("click",function() {
		console.log(colors[i]);	// NOT WORKING AS EXPECTED
  });
}

.squares { border:1px solid grey; width:25px; height:25px; display:inline-block; }

<div id="container">
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
</div>

Answer 1

您遇到了经典的闭包用例。将循环变量声明从 var 更改为 let，以为其提供块级范围并避免闭包。

另外(仅供参考(，不要使用getElementsByClassName()(请阅读此原因(，而是使用.querySelectorAll()。

var colors = [
	"rgb(25, 0, 0)",
	"rgb(10, 255, 0)",
	"rgb(30, 0, 255)",
	"rgb(55, 255, 0)",
	"rgb(52, 0, 25)",
	"rgb(60, 25, 255)"
]
var squares = document.querySelectorAll(".squares");
for (let i = 0; i < colors.length; i++) {
	squares[i].style.backgroundColor = colors[i];
	console.log(colors[i]);
	squares[i].addEventListener("click",function() {
		console.log(colors[i]);
  });
}

.squares { border:1px solid grey; width:25px; height:25px; display:inline-block; }

<div id="container">
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
</div>