標籤:點擊 data java log div har cti 結果 ext
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>列印索引</title></head><style type="text/css">li{background: pink;margin-bottom: 10px;height: 40px;}</style><body> <ul> <li>click</li> <li>click</li> <li>click</li> <li>click</li> <li>click</li></ul></body><script> var nodeList = document.getElementsByTagName(‘li‘); for (var i = 0; i < nodeList.length; i++) { nodeList[i].addEventListener("click", function(e) { console.log(i) }, false); } </script></html>
上面代碼會和我們預期的結果不應,每次點擊輸出的都是最後一個元素的索引。
function(e){}的匿名函數,在執行時,每一個都會建立一個新的範圍。這些匿名函數不會立即執行,僅僅是被定義,只有在點擊時才執行,被當做參數傳入addEventListener函數。所以在執行時i的值已經變為最後一個索引值。
要解決這個問題,我們可以用以下幾種方案:
方案1----使用閉包;
<script> var nodeList = document.getElementsByTagName(‘li‘); for (var i = 0; i < nodeList.length; i++) { (function(j){ nodeList[j].addEventListener("click", function(e) { console.log(j); }, false); })(i) ; }</script>
方案2-----使用es6中let的塊級範圍;
<script> var nodeList = document.getElementsByTagName(‘li‘); for (let i = 0; i < nodeList.length; i++) { nodeList[i].addEventListener("click", function(e) { console.log(i) }, false); }</script>
方案3----利用事件委託機制;
如果li較少的話,利用上面方式實現是可以的,但是如果li的數量過多,為每個li添加事件偵聽就會對頁面效能產生很大的影響,我們可以採用委託實現。 利用Array.prototype.slice.call(nodeList)的作用是將具有length屬性的元素轉為數組,這樣可利用indexOf方法擷取li的索引值。
<script> var nodeList = document.getElementsByTagName(‘li‘); arrNodes = Array.prototype.slice.call(nodeList); nodeUls = document.getElementsByTagName(‘ul‘); nodeUls[0].addEventListener("click",function(event){ var event = event || window.event; var target = event.target || event.srcElement; console.log(arrNodes.indexOf(target)) },false);</script>
方案4-----使用虛擬屬性;
<script> var nodeList = document.getElementsByTagName(‘li‘); for(var i=0; i< nodeList.length; i++){ nodeList[i].index = i; nodeList[i].addEventListener("click",function(e){ console.log(this.index) },false) }</script>
方案5----利用自訂屬性;
ul>li結構中給li標籤加上自訂屬性
<ul> <li data-index="0">click</li> <li data-index="1">click</li> <li data-index="2">click</li> <li data-index="3">click</li> <li data-index="4">click</li></ul>
然後js代碼如下
<script> var nodeList = document.getElementsByTagName("li"); for(var i=0; i<nodeList.length ; i++){ nodeList[i].addEventListener("click",function(e){ console.log(e.target.dataset.index);//自訂屬性用data-index格式的,可以使用dataset擷取; console.log(this.getAttribute("data-index")); },false) }</script>
利用js輸出ul下li的index索引值