Javascript - 获取循环功能

Question

我必须遵循以下代码：

var box = document.getElementsByClassName('Box');

for(i=0; i<box.length; i++){
  box[i].onclick = function(){
    this.classList.toggle('active');
  };
}

我试图让这个函数脱离这个循环，但它似乎不起作用。 有什么建议？

//get function out of the loop
var box = document.getElementsByClassName('Box');

for(i=0; i<box.length; i++){
  box[i].onclick = getBlue();
}
function getBlue(){
  this.classList.toggle('active');
}

http://codepen.io/AndrewRed/pen/OyBLzw?editors=001

Answer 1

使用对该函数的引用。

box[i].onclick = getBlue;

如果添加括号，则调用该函数并将box[i].onclick的值设置为getBlue的返回值，在这种情况下， getBlue的返回值是undefined因为它不返回任何内容。

Answer 2

你在这里调用函数：

box[i].onclick = getBlue();

而是将getBlue作为处理程序传递;

box[i].onclick = getBlue;

Answer 3

在大多数情况下，您可以使用其值替换变量。 所以让getBlue用函数定义替换getBlue 。 这应该与第一个示例完全相同：

box[i].onclick = getBlue();

function getBlue(){
  this.classList.toggle('active');
}

// becomes 

box[i].onclick = function getBlue(){
  this.classList.toggle('active');
}();

哦哦！ 没关系函数名称，但这看起来不像第一个例子！ 函数后面有() ，它没有出现在第一个例子中：

box[i].onclick = function(){
  this.classList.toggle('active');
}; // <- no () here

他们来自哪里？ 来自getBlue()当然。 函数后做什么() ？ 他们称这个功能。 现在应该清楚的是，在第一个示例中，您实际上并未调用该函数，您只需将该函数的引用分配给onclick 。

知道现在，我们知道正确的替换应该如何：

box[i].onclick = getBlue;

没有() 。