js为li列表添加点击事件

最新推荐文章于 2024-06-10 13:43:26 发布

caoPengFlying

最新推荐文章于 2024-06-10 13:43:26 发布

阅读量5.2w

点赞数 3

分类专栏： html/css 文章标签：闭包给li添加点击事件

本文链接：https://blog.csdn.net/caoPengFlying/article/details/78495310

版权

html/css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

今天看到一个面试题目

//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值

caoPengFlying

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
js为li列表添加点击事件

今天看到一个面试题目//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++){
复制链接

扫一扫

专栏目录