js实现点击＜li＞标签弹出其索引值

2022-02-09 18:31:03 阅读：159 来源： 互联网

根据上面HTML，用JS实现点击 li 输入当前 li 节点在 ul 列表中的索引

<ul>
  <li>11111</li>
  <li>22222</li>
  <li>33333</li>
  <li>44444</li>
  <li>55555</li>
<ul>

1.获取所有的li元素，然后进行循环给每个li绑定事件
在这个方法中，有一些小问题
（1）document.getElementsByTagName(‘li’)的返回值是一个nodeList，是一个类数组，像函数的arguments也是伪数组，而不是一个真正意义上的数组，所以直接调用数组的一些方法会出错，所以要注意先把他转换为数组，关于类数组转数组的方法在后面文章有所涉及,我在这里简单的使用了Array.from方法。
（2）在使用this.index给每一个元素绑定事件时不能使用箭头函数，因为箭头函数没有this，所以会取不到index的值。关于this也是需要深入了解和学习的。

var lis = document.getElementsByTagName('li')
    liList = Array.from(lis)
    liList.forEach((value,index)=>{
    console.log(value)
    value.index = index
    value.onclick = function(){
      console.log(this.index)
     }
    })

或者

var lis = document.getElementsByTagName('li')
    liList = Array.from(lis)
    liList.forEach((value,index)=>{
    console.log(value)
    value.index = index
    value.onclick = (e)=>{
      console.log(e.target.index)
     }
    })

2.利用事件委托机制，事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。
(1)ul绑定的事件target在点击过程中实际上触发的还是子元素，只不过是由父组件执行监听的任务，所以点击 11111 的时候，返回的target是<li>11111</li>， 第二步再去li的list中查找所在的位置就好了
(2)addEventListener的第三个参数说明可选。布尔值，指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行，false- false- 默认。事件句柄在冒泡阶段执行
(3)优势可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件就非常棒，可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

var lis = document.getElementsByTagName('li')
    liList = Array.from(lis)
    Ul = document.getElementsByTagName('ul')[0]
    Ul.addEventListener("click",function(event){
      var event = event || window.event;
          target = event.target || event.srcElement;
          console.log(liList.indexOf(target))
    },false);

标签：index,绑定,value,js,弹出,事件,li,event
来源： https://blog.csdn.net/springLilly/article/details/122846421

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js实现点击＜li＞标签弹出其索引值