<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
ul{margin:0;padding:0;}
li{list-style:none;height:50px;}
li:nth-child(even){background: #baf}
li:nth-child(odd){background: #fab}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis)
for(var i = 0;i<lis.length;i++){
lis[i].onclick = function(){
console.log(i)
}
}
</script>
</body>
</html>
不管点击哪一个li标签,输出都是4
onclick委托了但是没有触发,触发时因为代码自上而下运行,i已经变成了4,所以每个事件输出结果都是4.
正确做法1
将var 换成let
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
ul{margin:0;padding:0;}
li{list-style:none;height:50px;}
li:nth-child(even){background: #baf}
li:nth-child(odd){background: #fab}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis)
for(let i = 0;i<lis.length;i++){
lis[i].onclick = function(){
console.log(i)
}
}
</script>
</body>
</html>
正确做法2
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
ul{margin:0;padding:0;}
li{list-style:none;height:50px;}
li:nth-child(even){background: #baf}
li:nth-child(odd){background: #fab}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
for(var i = 0;i<lis.length;i++){
console.log(i);
(function(j){
lis[j].onclick = function(){
console.log(j)
}
})(i)
}
</script>
</body>
</html>