js for循环绑定问题解决

最新推荐文章于 2022-01-08 15:36:14 发布

husterxsp

最新推荐文章于 2022-01-08 15:36:14 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript for循环绑定

本文链接：https://blog.youkuaiyun.com/xsp_Login/article/details/46663359

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了解决JavaScript中由于使用循环为多个DOM元素添加点击事件而导致的闭包问题的两种方法：一是利用立即执行函数表达式(IIFE)确保每次循环都能创建独立的作用域；二是通过将循环变量绑定到DOM元素的属性上来解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网上看到的方法，第一个方法比较常见，第二种方法是第一次见，mark一下~

方法一：立即执行函数（IIFE）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>0</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<script type="text/javascript">
    var head = document.getElementsByTagName("h1");
    for(var i=0;i<head.length;i++){
        (function(i){
            head[i].onclick = function(){
                alert(i);
            };
        }(i));
    }
</script>
</body>
</html>

方法二：将i绑定到对应元素的的属性上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>0</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<script type="text/javascript">
    var head = document.getElementsByTagName("h1");
    for(var i=0;i<head.length;i++){
        head[i].index = i;
        head[i].onclick = function(){
            alert(this.index);
        };
    }
</script>
</body>
</html>

参考