面试题目:
html代码
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
js代码
var oli = document.getElementsByTagName("li");
for(var i=0; i<oli.length; i++){
oli[i].onclick = function () {
alert(i);
};
}
想给每个li添加点击事件，并打印出当前的index值。
很明显这样写并没有实现最终的结果。不管点击哪一个li都只打印了一个结果就是3。并没有得到我们想要的。到底什么原因呢？
onclick是一个事件，这个事件委托了并没有去触发，只有触发的时候才会调用回调函数，代码自上而下运行这时候i的值已经变为3了所以每个点击事件的回调结果都是3。那么如何去实现呢？看如下代码
var oli = document.getElementsByTagName("li");
for(var i=0; i<oli.length; i++){
function(j){
oli[j].onclick = function () {
alert(j);
};
}）(i)
}
这样的话点击不同的li就会打印对应的Index值。
我们实际需要每次i改变时，立即执行函数内的点击事件。
说白了就是改变i的作用域，保留他的值，因为上面的代码i的作用域是全局的，所以打印的结果都是3，现在是作为实参传递到匿名函数当中，并调用，变成形参写到了事件当中，这样就改变掉了他的作用域，也就是将他原来有的值保留了下来。所以结果就是打印对应的index值
网友评论