很奇怪的事件绑定问题，为什么四个SPAN都只执行最后一个事件？？？

问题在于evt 对象的改变，可以写成
<script language="JavaScript">
<!--
var createBar = function() {
var arr = [];

var sbar1 = document.createElement("SPAN");
sbar1.innerHTML = "添加";
sbar1.title = "add node";
sbar1.style.marginRight = "5px";
sbar1.style.cursor = "pointer";
sbar1.setAttribute("barEvt", "sbar1Evt");
arr.push(sbar1);

var sbar2 = document.createElement("SPAN");
sbar2.innerHTML = "编辑";
sbar2.title = "edit node";
sbar2.style.marginRight = "5px";
sbar2.style.cursor = "pointer";
sbar2.setAttribute("barEvt", "sbar2Evt");
arr.push(sbar2);

var sbar3 = document.createElement("SPAN");
sbar3.innerHTML = "删除";
sbar3.title = "delete node";
sbar3.style.marginRight = "5px";
sbar3.style.cursor = "pointer";
sbar3.setAttribute("barEvt", "sbar3Evt");
arr.push(sbar3);

var sbar4 = document.createElement("SPAN");
sbar4.innerHTML = "设置权限";
sbar4.title = "set role";
sbar4.style.cursor = "pointer";
sbar4.setAttribute("barEvt", "sbar4Evt");
arr.push(sbar4);

return arr;
};var sbar1Evt = function(param) {
alert('_sbar1Evt');
};var sbar2Evt = function(param) {
alert('_sbar2Evt');
};var sbar3Evt = function(param) {
alert('_sbar3Evt');
};var sbar4Evt = function(param) {
alert("_sbar4Evt")
};window.onload=function(){
var param = "params";
var s = createBar();
var d = document.getElementById("div1");
for (var i=0;i<s.length;i++) {
var ev = s[i].getAttribute("barEvt");
var evt = eval(ev);
if (ev && typeof evt=="function") {
s[i].onclick=new Function(ev+"\('"+param+"'\)")
}
d.appendChild(s[i]);
}
}
//-->
</script><html>
<head>
<title> New Document </title>
</head><body>
<div id="div1"></div>
</body>
</html>

解决方案 »

  1.   

    问题已经解决，我们老大解决的，放上代码
    ============================================================<script language="JavaScript">
    <!--
    // javascript 解析性语言的误区var createBar = function() {
    var arr = [];

    var sbar1 = document.createElement("SPAN");
    sbar1.innerHTML = "添加";
    sbar1.title = "add node";
    sbar1.style.marginRight = "5px";
    sbar1.style.cursor = "pointer";
    sbar1.setAttribute("barEvt", "sbar1Evt");
    arr.push(sbar1);

    var sbar2 = document.createElement("SPAN");
    sbar2.innerHTML = "编辑";
    sbar2.title = "edit node";
    sbar2.style.marginRight = "5px";
    sbar2.style.cursor = "pointer";
    sbar2.setAttribute("barEvt", "sbar2Evt");
    arr.push(sbar2);

    var sbar3 = document.createElement("SPAN");
    sbar3.innerHTML = "删除";
    sbar3.title = "delete node";
    sbar3.style.marginRight = "5px";
    sbar3.style.cursor = "pointer";
    sbar3.setAttribute("barEvt", "sbar3Evt");
    arr.push(sbar3);

    var sbar4 = document.createElement("SPAN");
    sbar4.innerHTML = "设置权限";
    sbar4.title = "set role";
    sbar4.style.cursor = "pointer";
    sbar4.setAttribute("barEvt", "sbar4Evt");
    arr.push(sbar4);

    return arr;
    };var sbar1Evt = function(param) {
    alert(param);
    };var sbar2Evt = function(param) {
    alert('_sbar2Evt');
    };var sbar3Evt = function(param) {
    alert('_sbar3Evt');
    };var sbar4Evt = function(param) {
    alert("_sbar4Evt")
    };window.onload=function(){
    var param = "params";
    var ev, evt;
    var s = createBar();
    var d = document.getElementById("div1");
    var i = 0;
    for (;i<s.length;i++) {
    ev = s[i].getAttribute("barEvt");
    eval("var mevent_"+i+"=" + ev); if (ev) {
    s[i].setAttribute("index", i);
    s[i].onclick=function(){
    eval("var fun = mevent_"+this.getAttribute("index"));
    fun(param);
    }
    }
    d.appendChild(s[i]);
    }

    //i = 100;}
    //-->
    </script><html>
    <head>
    <title> New Document </title>
    </head><body>
    <div id="div1"></div>
    </body>
    </html>============================================================
    其实根本误区是，像javascript这样的解析性语言，虽然给每个span加了个事件，但这个事件只是一个假的指针，并没有把真正的函数传过去，在运行时才会查找这个函数，但这个时候i已经改变成最后那个i了，所以取不到之前那个函数
      

  2.   

    hbhbhbhbhb1021(天外水火(我要多努力))  的方法很简洁，刚才我居然没看到 -.-!!!!!
      

  3.   

    等待 liuxiaoyi666(MSMVP 小猪妹荣誉马甲之八卦兔子)  的答案，虽然已经给了分数
      

  4.   

    hbhbhbhbhb1021 的方法怎么不能传 Object {"test":"test"} ？？？？？
    吃饭去，等下测试
      

  5.   

    -。- 没了解 new Function，原来跟eval差不多，参数只能是字符串，还是用老大的代码吧。。