元素批量添加事件:
概述:在一些特定的场景下,有很多相同节点(标签)需要添加相同的相同的事件,就可以批量添加事件。
```
+function(vsss){
sv[vsss].onclick=function(){
sv[vsss].style.color="red";
}
```
闭包事件
函数上下文 this
概述:在函数的函数体中是有函数上下文this概念。
(当用户触发了元素事件的时候,函数上下文即为触发这个事件的元素。
```
<script type="text/javascript">
var sv=document.getElementsByTagName("li");
for(var i=0;i<sv.length;i++){
sv[i].onclick=function(){
this.style.color="red";
}
}
</script>
```
## 代码案例:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
width: 100%;
height: 30px;
background-color: bisque;
display: block;
}
ul li{
float:left;
display: block;
margin-left: 25px;
line-height:30px;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>新闻</li>
<li>军事</li>
<li>知识</li>
<li>好玩</li>
</ul>
</body>
</html>
<script type="text/javascript">
var sv=document.getElementsByTagName("li");
for(var i=0;i<sv.length;i++){
+function(vsss){
sv[vsss].onclick=function(){
sv[vsss].style.color="red";
}
}(i);
}
</script>
<script type="text/javascript">
var sv=document.getElementsByTagName("li");
for(var i=0;i<sv.length;i++){
sv[i].onclick=function(){
this.style.color="red";
}
}
</script>
```