话不多说,直接上代码!
第一种方法:
<ul id = "list">
<li>click</li>
<li>click</li>
<li>click</li>
<li>click</li>
<li>click</li>
</ul>
var li = document.getElementsByTagName("li");
for(var i = 0; i < li.length; i++) {
li[i].index = i;
li[i].onclick = function() {
console.log(this.index);
}
}
第二种方法:关于let的定义:let
允许把变量的作用域限制在块级域中。与var的区别在于var 声明要么是全局变量或者是局部变量,而无法变为块级
var list = document.getElementById("list");
for (var i = 1; i <= 5; i++) {
var item = document.createElement("LI");
item.appendChild(document.createTextNode("Item " + i));
let j = i;
item.onclick = function (ev) {
console.log("Item " + j + " is clicked.");
};
list.appendChild(item);
};
结果当声明 j 为let的时候,每次点击一个li,每一个li都有自己的事件,输出结果为:ITem1 is clicked,ITem2 is clicked,ITem3 is clicked,ITem4 is clicked,ITem5 is clicked。
而我再次把let j = i换成 var j = i时候,每点击一次li输出结果为:ITem5 is clicked。因为var j = i 是局部变量,5个内部函数都指向了同一个 j ,而 j 最后一次赋值是5。而当用let声明后,
j 变成块级域(也就是花括号中的块,每进入一次花括号就生成了一个块级域),所以 5 个内部函数指向了不同的 j 。
第三种方法:利用事件委托机制如果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;
alert(arrNodes.indexOf(target))
},false);
</script>
第四种方法:利用闭包,
<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>
有关闭包具体内容是一个难点,另外去探索;
第五种方法:自定义属性;
<ul class="list">
<li data-index="0">1</li>
<li data-index="1">2</li>
<li data-index="2">3</li>
<li data-index="3">4</li>
<li data-index="4">5</li>
</ul>
var li = document.getElementsByTagName("li");
for(var i = 0;i < li.length;i++){
li[i].setAttribute("data-index",i)//属性不定义也是可以的;
li[i].onclick = function(e){
console.log(e.target.getAttribute("data-index"))
}
}
第六种方法:
var li = document.getElementsByTagName("li");
for(var i = 0;i < li.length;i++){
li[i].setAttribute("data-index",i)
li[i].onclick = function(e){
console.log(e.target.dataset.index);
}
}
第七种方法:
<script type="text/javascript">
var ul = document.getElementById("list");
var li = document.getElementsByTagName("li");
for(var i = 0;i < li.length;i++){
let index = i;
li[i].onclick = function(e){
console.log(index);
}
}
</script>
此种方法依据let es6语句实现;
哪位好友还有好的方法欢迎留言!!谢谢!