給多個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) 如果要其他需求不必這樣,但是架不住,這個代碼執行效率高,可以提高性能,