js-循环里面的时事件绑定（闭包）

最新推荐文章于 2022-04-01 21:56:00 发布

嫌疑-人

最新推荐文章于 2022-04-01 21:56:00 发布

阅读量352

点赞数

分类专栏： javaScript 文章标签： JavaScript 闭包绑定事件

本文链接：https://blog.csdn.net/qq_39396275/article/details/82012686

版权

javaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

如下函数，想要打印出每个i的序号：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script>
    var liCol = document.getElementsByTagName('li');
        len = liCol.length;
    for(var i = 0; i < len; i++){
        liCol[i].addEventListener('click',function(){
            console.log(i);
        },false);
    }
</script>
</html>

打印结果：3 3 3
分析：将事件绑定到对象上，等到循环结束时才执行函数里面的内容，所以打印出3；

解决办法：
使用闭包：立即执行函数

for(var i = 0; i < len; i++){
        //立即执行函数
        (function(i){
            liCol[i].addEventListener('click',function(){
                console.log(i);
            },false);
        }(i))

    }

总结：绑定事件时，一旦事件出现在循环里面，就要考虑是否要使用闭包。用到循环里面你的i时必须要使用闭包

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

嫌疑-人

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-循环里面的时事件绑定（闭包）

如下函数，想要打印出每个i的序号：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;&lt;/head&gt;&lt;body&amp
复制链接

扫一扫