javascript生成input框的按钮添加事件问题

我的源码是如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Untitled Document</title>
        <script type="text/javascript">
            
            //校验是否全由大于0的数字组成
            function isBigZero(s){
                var patrn = /^[0-9]{1,2}(([.]{1}[0-9]{1})|([.]{0}[0-9]{0}))$/;
                if (!patrn.exec(s)) 
                    return false
                return true
            }
function test(){
var oArray = new Array();
var obj = new Object();
obj.value="spring";
obj.id="00";
oArray.push(obj);
var obj1 = new Object();
obj1.value="spring1";
obj1.id="01";
oArray.push(obj1);
var obj2 = new Object();
obj2.value="spring2";
obj2.id="02";
oArray.push(obj2);
var oDiv = document.getElementById("aaa");
for (var i=0;i < oArray.length;i++){
var oDom = oArray[i];
var oinput = document.createElement("input");
oinput.setAttribute("value",oDom.value);
oinput.setAttribute("id",oDom.id);
oinput.setAttribute("type","button");
oinput.onclick = function(){
alert(oDom.id);
};
oDiv.appendChild(oinput);
}

}
        </script>
    </head>
    <body onload="test();">
     <div id="aaa"></div>
    </body>
</html>
问题是:生成按钮后,点按钮,弹出的值都是最后一个添加上去的ID,不知道为什么,请高手看看是怎么回事.

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <title>Untitled Document </title>
            <script type="text/javascript">
               
                //校验是否全由大于0的数字组成
                function isBigZero(s){
                    var patrn = /^[0-9]{1,2}(([.]{1}[0-9]{1})|([.]{0}[0-9]{0}))$/;
                    if (!patrn.exec(s))
                        return false
                    return true
                }
    function test(){
    var oArray = new Array();
    var obj = new Object();
    obj.value="spring";
    obj.id="00";
    oArray.push(obj);
    var obj1 = new Object();
    obj1.value="spring1";
    obj1.id="01";
    oArray.push(obj1);
    var obj2 = new Object();
    obj2.value="spring2";
    obj2.id="02";
    oArray.push(obj2);
    var oDiv = document.getElementById("aaa");
    for (var i=0;i < oArray.length;i++){
    var oDom = oArray[i];
    var oinput = document.createElement("input");
    oinput.setAttribute("value",oDom.value);
    oinput.setAttribute("id",oDom.id);
    oinput.setAttribute("type","button");
    //修改此处
    oinput.onclick = (function (oDom){ return function(){
    alert(oDom.id);
    }})(oDom);
    oDiv.appendChild(oinput);
    }}
            </script>
        </head>
        <body onload="test();">
        <div id="aaa"> </div>
        </body>
    </html> 
      

  2.   

    通过这种方式绑定事件，需要用到JS的闭包方法：即在一个函数内部再定义一个函数，并返回此函数。闭包的好处就是，每次oinput.onclick赋值的时候，都是相对独立的对象，即alert(oDom.id); 这里面的oDom指向不同的对象最近刚理解的Javascript闭包，希望对你有帮助同时也关注更为深刻的理解