JS 循环li添加点击事件（闭包的应用）攻略
在 Web 前端开发中，经常需要对列表中的每一项元素进行操作，可是一般的循环添加事件时会出现事件函数中变量值不符合预期的问题。这时候，就需要用到闭包的思想。以下是实现思路和代码示例。
实现思路
- 找到列表元素的父级元素
- 找到列表元素，可以通过
querySelectorAll来找到（或者使用children） - 遍历列表元素，利用闭包来绑定 click 事件并保存索引
代码示例一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JS 循环li添加点击事件（闭包的应用）</title>
</head>
<body>
<ul id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
<script>
const list = document.querySelector("#list");
const items = list.querySelectorAll("li");
for (let i = 0; i < items.length; i++) {
(function (index) {
items[index].addEventListener("click", function () {
console.log("you clicked item ", index + 1);
});
})(i);
}
</script>
</body>
</html>
代码解析：
首先使用 querySelector 方法找到了 <ul> 元素，然后使用 querySelectorAll 方法找到所有 <li> 子元素。在循环添加事件函数时，在闭包中使用 let 声明变量将索引保存下来，并在事件函数中使用该索引值。
代码示例二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JS 循环li添加点击事件（闭包的应用）</title>
</head>
<body>
<ul id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
<script>
const list = document.querySelector("#list");
const items = list.querySelectorAll("li");
items.forEach(function (item, index) {
item.addEventListener("click", function () {
console.log("you clicked item ", index + 1);
});
});
</script>
</body>
</html>
代码解析：
使用 querySelector 和 querySelectorAll 找到 <ul> 和 <li> 元素，然后使用 forEach 方法简化循环添加事件函数过程。在 forEach 传入的回调函数中，第二个参数就是当前元素的索引值，直接可以使用该变量。
总结
使用闭包的方式可以有效地解决循环添加事件函数时变量值不符合预期的问题，方便开发和维护。而 ES6 中提供的 forEach 方法则可以简化循环操作过程，使用灵活。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS 循环li添加点击事件 （闭包的应用） - Python技术站
微信扫一扫 
支付宝扫一扫 