js为li列表添加点击事件

来源：互联网发布：手游数据查询编辑：程序博客网时间：2024/06/05 08:07

今天看到一个面试题目

//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的作用域是全局的，所以打印的结果都是3，现在是作为实参传递到匿名函数当中，并调用，变成形参写到了事件当中，这样就改变掉了他的作用域，也就是将他原来有的值保留了下来。所以结果就是打印对饮的index值

阅读全文

0 0