为 a 标签添加事件可以使用 JS来实现。其中最简单的方法就是通过给每个a标签添加 onclick 事件来实现。但是这种方式比较繁琐，尤其是当页面中大量的 a 标签时，维护起来会非常麻烦。因此我们可以使用闭包循环来为所有 a 标签添加事件。
以下是实现方式：
- 首先我们需要在 JS 文件中获取所有的 a 标签
const links = document.querySelectorAll('a');
- 然后我们需要使用 for 循环来迭代所有的 a 标签
for (let i = 0; i < links.length; i++) {
}
- 然后我们需要在循环内部为每个 a 标签添加事件。这里采用了闭包的方式来实现：
for (let i = 0; i < links.length; i++) {
(function() {
let j = i;
links[j].onclick = function() {
console.log(j);
}
})();
}
在上述代码中，我们使用了一个立即执行函数来创建了一个新的作用域。这样我们就可以在循环内部使用一个新的变量 j 来保存当前循环的索引 i。然后我们在每个 a 标签的 onclick 事件中打印出 j 值，就能够验证每个 a 标签是否都有了事件监听器。
下面是一个完整示例代码：
<!DOCTYPE html>
<html>
<head>
<title>JS为a标签添加事件</title>
</head>
<body>
<div>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<script>
const links = document.querySelectorAll('a');
for (let i = 0; i < links.length; i++) {
(function() {
let j = i;
links[j].onclick = function() {
console.log(j);
}
})();
}
</script>
</body>
</html>
此时，当点击任意一个 a 标签时，控制台会输出当前点击的 a 标签的索引。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现为a标签添加事件的方法(使用闭包循环) - Python技术站
微信扫一扫 
支付宝扫一扫 