元素批量添加事件:
概述:在一些特定的場景下,有很多相同節點(標簽)需要添加相同的相同的事件,就可以批量添加事件。
```
+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>
```