JavaScript 实现 li 集合点击事件与索引绑定的三种方法
作者:小圆点时间:2026-10-22 11:48:30浏览:192
本文详细介绍在 JavaScript 中为 li 集合绑定点击事件并获取对应索引的三种常见实现方式。通过遍历 DOM 节点,分别采用直接赋值属性、立即执行函数闭包以及返回函数的闭包技巧,解决事件监听中索引值捕获的问题,帮助开发者根据实际需求选择合适方案。
JavaScript li 集合点击事件绑定实现
以下代码演示了如何为 li 集合绑定点击事件,具体实现如下:
//Method-1:
var items = document.getElementsByTagName('li');
for(var i=0;i<items.length;i++){
items[i].index = i;
items[i].onclick = function(){
this.innerHTML = this.index;
}
}
//Method-2:
var items = document.getElementsByTagName('li');
for(var i = 0; i<items.length; i++){
(function(index){
items[i].onclick = function(){
this.innerHTML = index;
}
})(i)
}
//Method-3:
var items = document.getElementsByTagName('li');
for(var i = 0; i<items.length; i++){
items[i].onclick = function(index){
return function(){
this.innerHTML = index;
}
}(i)
}
总结
以上介绍了 JavaScript 中 li 集合点击事件绑定的相关内容,希望能对大家有所帮助。如有任何疑问,欢迎留言,小编会及时回复。感谢大家对本站的支持!
作者最新文章
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
