4种方法解决为 li列表添加事件问题（for循环经典问题）

最新推荐文章于 2023-09-01 10:33:00 发布

原创最新推荐文章于 2023-09-01 10:33:00 发布 · 4.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html5 #css #javascript

前端专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了在前端开发中，针对HTML li列表元素如何使用for循环添加事件的四种有效方法，包括直接绑定、事件委托、利用类名等。通过实例代码解析，帮助开发者解决实际操作中的常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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)
// }

得到结果如图：