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);
上一篇:[SpringBoot2]Lombok


下一篇:Array ---> Array.prototype.entries()