onclick中实时捕捉标签的值

最新推荐文章于 2022-05-13 17:13:41 发布

qq_38604224

最新推荐文章于 2022-05-13 17:13:41 发布

阅读量336

点赞数

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

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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].οnclick=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