如何利用原生JS输出ul下li的index索引值,如果按以下的写法写,则每次点击输出的都是最后一个元素的索引。
function(e){}的匿名函数,在执行时,每一个都会创建一个新的作用域。这些匿名函数不会立即执行,仅仅是被定义,只有在点击时才执行,被当做参数传入addEventListener函数。所以在执行时i的值已经变为最后一个索引值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打印索引</title>
</head>
<body>
<ul>
<li>click</li>
<li>click</li>
<li>click</li>
<li>click</li>
<li>click</li>
</ul>
<script>
var nodeList = document.getElementsByTagName('li');
for (var i = 0; i < nodeList.length; i++) {
nodeList[i].addEventListener("click", function(e) {
alert(i);
}, false);
}
</script>
</body>
</html>
实现方法
1.利用闭包实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打印索引</title>
</head>
<body>
<ul>
<li>click</li>
<li>click</li>
<li>click</li>
<li>click</li>
<li>click</li>
</ul>
<script>
var nodeList = document.getElementsByTagName('li');
for (var i = 0; i < nodeList.length; i++) {
(function(j){
nodeList[j].addEventListener("click", function(e) {
alert(j)
}, false);
})(i) ;
}
</script>
</body>
</html>
2.ES6实现
我们也可以利用ES6的let来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打印索引</title>
</head>
<body>
<ul>
<li>click</li>
<li>click</li>
<li>click</li>
<li>click</li>
<li>click</li>
</ul>
<script>
var nodeList = document.getElementsByTagName('li');
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].addEventListener("click", function(e) {
alert(i);
}, false);
}
</script>
</body>
</html>
3.利用事件委托机制
如果li较少的话,利用上面方式实现是可以的,但是如果li的数量过多,为每个li添加事件侦听就会对页面性能产生很大的影响,我们可以采用委托实现。
利用Array.prototype.slice.call(nodeList)的作用是将具有length属性的元素转为数组,这样可利用indexOf方法获取li的索引值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打印索引</title>
</head>
<body>
<ul>
<li>click</li>
<li>click</li>
<li>click</li>
<li>click</li>
<li>click</li>
</ul>
<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;
alert(arrNodes.indexOf(target))
},false);
</script>
</body>
</html>