onclick中实时捕捉标签的值

最新推荐文章于 2025-04-28 08:26:10 发布

qq_38604224

最新推荐文章于 2025-04-28 08:26:10 发布

阅读量388

点赞数

分类专栏：前端文章标签： javascript

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种常见的JavaScript编程陷阱，即在为多个DOM元素设置点击事件监听时，由于作用域问题导致所有事件回调中获取相同的变量值。通过使用闭包，可以确保每个事件处理器都捕获到正确的变量值。

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

<body>
        <a>1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
        <a>5</a>
        <a>6</a>
        <a>7</a>
        <a>8</a>
        <a>9</a>
        <a>10</a>
        <a>11</a>
        <a>12</a>
</body>

    var a =document.getElementsByTagName("a");
    for(var i=0;i<a.length;i++){
        a[i].onclick=function(){
            alert(i);
        }
    }

上述的这段代码：当你想要实时的捕捉a标签的值，可能都会跟我一样遇到这样的问题。原本以为简单写一个for循环就可以解决问题，却没想到onclick是异步调用，

所以不管怎么尝试，输出的i值都是for完整执行后的i值。

简单的利用闭包就可以解决这个问题：

window.onload = function(){
    var a = document.getElementsByTagName('a');
    for( var i = 0; i < a.length; i++ ){
        (function (n){
            a[n].onclick = function(){
                console.log( n );
            };
        }(i));
    }
};

闭包的局部作用域，每执行一个for就执行一次匿名函数，有自己的运行环境跟作用域链，所以一个变量就记录一个实时的值。

文章参考自：http://www.jianshu.com/p/b394939add0b