本文详细介绍在 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 集合点击事件绑定的相关内容,希望能对大家有所帮助。如有任何疑问,欢迎留言,小编会及时回复。感谢大家对本站的支持!