因为循环是非常快的，我们手动点击的时候，for循环已经循环完了。如果在循环里面添加点击事件，点击事件的i的值就是循环结果的那个值，而不是对应的循环的值，此时，我们就需要用到this 来实现 点击哪一个，this就指向哪一个
this： 指的是当前的对象， 是关键词，不能当做变量名，只能读，不能写，它的值只能用来用，而不能修改
通常，this有2种用法，第一种，在函数外部使用，此时，this的值指向的是Windows
第二种，在函数内部使用。又分为2种情况，1，直接调用函数，this同样指向的是Windows 2，被事件调用，并且是以赋值的形式出现的，此时this指向的是谁调用了函数，this就指向谁的。这就很好地方便了再循环里面使用this来实现，每一个的事件发生。
可以通过以下例子开具体了解:
首先，我们先来创建几个div 实现，点击任意一个div 这个被点击的div的背景颜色就相应的作出改变 改变成为红色
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this批量改变元素的样式</title>
<link rel="stylesheet" href="../css/this批量改变元素的样式.css">
</head>
<body>
<div id="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<script src="../js/this批量改变元素的样式.js"></script>
</body>
</html> css
.box{
width: 200px;
height: 200px;
margin-right: 20px;
float: left;
}
此时，页面中就有5个颜色为金色的div
js代码：
var bigDiv=document.getElementById('content');
var listOfDiv=bigDiv.getElementsByTagName('div');
for(var i=0;i<listOfDiv.length;i++){
listOfDiv[i].onclick=function(){
this.style.backgroundColor='red';
};
}
这样就可以实现，任意点击一个div 这个div的颜色就变为红色