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

作者最新文章