Question

考虑以下javascript：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function runMe(){
 for(var x=0; x<5; x++){
  var d=document.createElement("DIV");
  d.innerHTML="test " + x;
  d.tabIndex=x;

  d.onfocus=function(y){
   return function(){
    alert("focus: " + y);
   }
  }(x);

  d.onblur=function(y){
   return function(){
    alert("blur: " + y);
   }
  }(x);

  document.body.appendChild(d);

 }
}
</script>
</head>
<body onload="runMe()">
</body>
</html>

运行时，onblur事件会触发并警告新聚焦的div的索引，而不是警告先前聚焦的div的索引。

奇怪的是，当我注意到onfocus事件时，onblur按预期工作，提醒先前关注的div。

我似乎无法找出为什么onblur事件触发与onfocus事件相同的索引。

我相信我的封闭是正确的，但我不是百分之百。

有没有人对我的错误有所了解？

Answer 1

DEMO：http://jsfiddle.net/abc123/nCwDz/1/

您的代码似乎对我有用...更改了对console.log的警报，请使用Firefox或Chrome，然后转到控制台查看它是否有效。

为了证明您的闭包是正确的，我已将您的代码更改为适当缩进。

CODE：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function runMe(){
                for(var x=0; x<5; x++){
                    var d=document.createElement("DIV");
                    d.innerHTML="test " + x;
                    d.tabIndex=x;

                    d.onfocus=function(y){
                        return function(){
                            console.log("focus: " + y);
                        }
                    }(x);

                    d.onblur=function(y){
                        return function(){
                            console.log("blur: " + y);
                        }
                    }(x);

                    document.body.appendChild(d);
                }
            }
        </script>
    </head>
    <body onload="runMe()">
    </body>
</html>

Javascript onfocus和onblur闭包不能按预期工作

1 个答案: