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

根据上面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