<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>4种方法解决为li添加事件问题</title> <style type="text/css"> ul li{ list-style: none; width: 200px; height: 50px; line-height: 50px; text-align: center; margin: 10px; border: 1px solid red; } </style></head><body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul></body><script type="text/javascript"> var lis = document.querySelectorAll("li"); /* 此时得到的是lis.length的值，这是问题的症结所在 */ /* 这种问题的本质就是利用var声明的 i 是一个全局变量，全局变量在for执行时会得到最后一个数值(lis.length),所以会产生得不到每个中间值， 解决问题的本质是要将 i 转换成局部变量。 */ // for(var i = 0;i<lis.length;i++){ // lis[i].onclick = function(){ // console.log(i); // }
// }
得到结果如图：
/* 解决方法一：将i的值赋值给它本身的一个变量 */ // for(var i = 0;i<lis.length;i++){ // lis[i].index = i; // lis[i].onclick = function () { // console.log(this.index); // } // }
得到结果如图：
/* 解决方法二：匿名自执行函数 */ // 将 i 传给匿名自执行函数的局部变量j // for(var i = 0;i<lis.length;i++){ // (function(j){ // lis[j].onclick = function () { // console.log(j); // } // })(i) // }
得到结果如图：
/* 解决方法三：利用函数参数方法 */ // 将lis 和 li 传给函数的参数，函数的参数实际为局部变量 // function clickEvent (li , index) { // li.onclick = function () { // console.log(index); // } // } // for(var i = 0;i<lis.length;i++){ // clickEvent(lis[i] , i) // }
得到结果如图：
/* 解决方法四：把var 改为 let */ for(let i = 0;i<lis.length;i++){ lis[i].onclick = function () { console.log(i); } }
得到结果如图：
</script></html>