给多个li循环绑定事件,输出每个li的索引值,(里面的内容也可)四种方法

javaScript 循环给每个 li 绑定事件,输出当前点击 li 标签的索引值

div class="container">
        <ul>
            <li>yellow</li>
            <li>red</li>
            <li>blue</li>
            <li>orange</li>
            <li>black</li>
            <li>pink</li>
        </ul>
    </div>

问题程序!

 var colorUl = document.getElementsByTagName("ul")[0];
    var colorLi = colorUl.children;
    console.log(colorLi);
    for(var i = 0; i < colorLi.length; i ++){
        colorLi[i].onclick = function(){
            console.log(i);
        }
    }

问题分析
该程序运行无论点击哪一个 li 都是会输出 6,因为在循环执行的过程之中,函数表达式是不会执行的,当 i = 6 的时候,循环不执行,那么开始执行函数,值得注意的是 console.log(i) 里面的 i 并且当前 colorLi[i]中的 i 而是指向本作用域的 i, i = 6

方法一

 for(var i = 0; i < colorLi.length; i ++){
     colorLi[i].index = i;
     colorLi[i].onclick = function(){
         console.log(i);
     }
 }

给当前对象 colorLi 绑定一个属性,让这个属性值为当前 i,相当于手动设置了一个索引值.

方法二

 for(var i = 0; i < colorLi.length; i ++){
    (function(i){
         colorLi[i].onclick = function(){
         console.log(i);
     }
    }(i))
 }

利用立即执行函数的和闭包特性来解决问题

方法三

 for(let i = 0; i < colorLi.length; i ++){
     colorLi[i].index = i;
     colorLi[i].onclick = function(){
         console.log(i);
     }
 }

使用 es6 语法块级作用域变量声明

方法四

 colorUl.addEventListener("click",function(e){
     var e =  e || window.e;
     var target = e.target || e.srcElement;
     console.log(target.innerHtml)
     switch(target.id){
         case "yellow":console.log(1);
                 break;
         case "red":consoleh.log(2);
                 break;
         case "blue":console.log(3);
                 break;
         case "black": console.log(4);
                 break;
         case "pink":console.log(5);
     }
 },false)

事件委托

事件委托是指将事件绑定目标元素的到父元素上，利用冒泡机制触发该事件

优点：

可以减少事件注册，节省大量内存占用
可以将事件应用于动态添加的子元素上
但使用不当会造成事件在不应该触发时触发

ulEl.addEventListener('click', function(event){
  var target = event.target || event.srcElement;
  if(target && target.nodeName.toUpperCase() === "LI"){
    console.log(target.innerHTML);
  }
}, false);

> 个人感觉这个方法虽然书写麻烦,(还要自己加索引值输出,给每个 li 添加 id) 如果要其他需求不必这样,但是架不住,这个代码执行效率高,可以提高性能,