for循环闭包添加事件方法 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>for循环闭包添加事件方法</title>
<script language="javascript" type="text/javascript">
    window.onload = function(){
        var btn = document.getElementsByTagName('input');
        for(var i = 0;i<btn.length;i++){
            //方法一
            (function(x){
                btn[x].onclick = function(){
                    console.log(x);
                };
            })(i);

            //方法二
            (function(){
                var j = i;
                btn[j].onclick = function(){
                    console.log(j);
                }
            })()

            //方法三
            btn[i].onclick = (function(j){
                return function(){
                    console.log(j);
                };
            })(i);

            //错误方法
            btn[i].onclick = function(){
                var j = i;
                console.log(j);
            }
        }
    }

</script>
</head>
<body>
    <input value='按钮' type='button' id='btn1' />
    <input value='按钮' type='button' id='btn2' />
    <input value='按钮' type='button' id='btn3' />
    <input value='按钮' type='button' id='btn4' />
    <input value='按钮' type='button' id='btn5' />
</body>
<script>
    
</script>
</html>

 

posted @ 2017-05-16 17:37  oliverlht  阅读(166)  评论(0)  编辑  收藏  举报