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