未何不能删除掉事件


<html>
<body>
<div id='ss'></div>
<script>
    var data = [ 
      {"txt":"人族","menu":[
                                {"txt":"大法师","menu":[
                                                            {"txt":"水元素"},
                                                              {"txt":"暴风雪"},
                                                            {"txt":"辉煌光环"},
                                                            {"txt":"瞬间移动"}
                                                            ]},
                                {"txt":"山丘之王","menu":[
                                                            {"txt":"风暴之锤"},
                                                              {"txt":"锥地"},
                                                            {"txt":"锥晕"},
                                                            {"txt":"天神下凡"}
                                                            ]},
                                {"txt":"圣骑士","menu":[
                                                            {"txt":"光"},
                                                              {"txt":"无敌"},
                                                            {"txt":"光环"},
                                                            {"txt":"复活"}
                                                            ]},
                                {"txt":"血法师","menu":[
                                                            {"txt":"火焰"},
                                                              {"txt":"吸蓝"},
                                                            {"txt":"虚无"},
                                                            {"txt":"神鸟凤凰"}
                                                            ]}
                                ]},
      {"txt":"兽族","menu":[
                                {"txt":"贱圣","menu":[
                                                            {"txt":"疾风步"},
                                                              {"txt":"影分身"},
                                                            {"txt":"致命一击"},
                                                            {"txt":"剑刃风暴"}
                                                            ]},
                                {"txt":"先知男","menu":[
                                                            {"txt":"狼"},
                                                              {"txt":"日"},
                                                            {"txt":"闪电链"},
                                                            {"txt":"地震"}
                                                            ]},
                                {"txt":"牛头人酋长","menu":[
                                                            {"txt":"冲击波"},
                                                              {"txt":"阵地"},
                                                            {"txt":"耐久光环"},
                                                            {"txt":"复活"}
                                                            ]},
                                {"txt":"小YY","menu":[
                                                            {"txt":"变动物"},
                                                              {"txt":"治疗波"},
                                                            {"txt":"小蛇棒子"},
                                                            {"txt":"全体无敌"}
                                                            ]}
                                ]},
      {"txt":"不死族","menu":[
                                {"txt":"死亡骑士","menu":[
                                                            {"txt":"大便"},
                                                              {"txt":"光环"},
                                                            {"txt":"吃人"},
                                                            {"txt":"复尸体"}
                                                            ]},
                                {"txt":"巫妖","menu":[
                                                            {"txt":"暴冰"},
                                                              {"txt":"冰甲"},
                                                            {"txt":"吃人"},
                                                            {"txt":"死亡凋零"}
                                                            ]},
                                {"txt":"恐惧魔王","menu":[
                                                            {"txt":"蝙蝠"},
                                                              {"txt":"睡觉"},
                                                            {"txt":"吸血光环"},
                                                            {"txt":"黄色石头人"}
                                                            ]},
                                {"txt":"小强王子","menu":[
                                                            {"txt":"小小强"},
                                                              {"txt":"倒刺"},
                                                            {"txt":"身上长倒刺"},
                                                            {"txt":"很多小小强"}
                                                            ]}
                                ]}
   ]   
  
function $(Id){return document.getElementById(Id)};
function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)} 
 function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)}function create(elm,parent,fn){
    var element = document.createElement(elm);
    if(fn)fn(element);
    parent.appendChild(element);
}   //父元素添加子元素  fn是个函数 用来对子元素做设置的 比如设置id classNamefunction  initialize(parent,num,title,data){                               //传建初始化界面
    for(var i = 0; i<num;i++)
        {
             parent.innerHTML = parent.innerHTML+title[i];
             create('select',parent,function(obj){
             if(i==0){for(var j=0;j<data.length;j++)obj.options.add(new Option(data[j].txt,j))}
             })
        }  //创见3个select 但是只在第个select中填充数据
        
        addListener(parent.getElementsByTagName("select")[0],'change',function(){change(parent.getElementsByTagName('select'),data[parent.getElementsByTagName("select")[0].selectedIndex].menu,1)})    //给第一个select添加事件    
        
        change(parent.getElementsByTagName('select'),data[0].menu,1,true)  //就是给后面的select填充数据        
}function change(selects,data,num,o){
    //alert(num)
    if(!selects[num])return;         //如果这个select不存在 返回   
    if(!data) return;                //如果没有数据源   返回
    selects[num].length=0                 //晴空掉options
    for(var i=0;i<data.length;i++)       
    {selects[num].options.add(new Option(data[i].txt,i))}   //给select填充数据
    if(o)
    {addListener(selects[num],'change',function(){change(selects,data[selects[num].selectedIndex].menu,(num+1))})}
    else
    {
    //alert('a')                      //=======================
   // alert(selects[num].innerHTML)   //=======================
     removeListener(selects[num],'change',change);   //这里无法删除掉事件  好奇怪啊..
    // addListener(selects[num],'change',function(){change(selects,data[selects[num].selectedIndex].menu,(num+1))})
    }
    o?(change(selects,data[selects[num].selectedIndex].menu,num+1,o)):(change(selects,data[selects[num].selectedIndex].menu,num+1))// 给后面的select填充数据 
}
initialize($('ss'),3,['种族','英雄','技能'],data)
</script>
</body>
</html>======================
正确啊？你所谓的删除事件，是清楚数据还是什么？
不太明白，可以说下，你想实现的效果？

解决方案 »

  1.   

    change有4个参数
    但是只是在加载数据的时候 才有第4个参数所以加载完了,
    在点第一个select 
    会removeListener(selects[num],'change',change);
    就是会把第个select的事件删除掉  但是点第2个的时候 还是会alert出来操作步骤  先选择第1个select   在选择第2个select(这时是不应该alert,因为事件在选第一个select的时候就删除掉了)  
    想实现的效果??  无限连咯.............
      

  2.   

     if(o)
        {addListener(selects[num],'change',function(){change(selects,data[selects[num].selectedIndex].menu,(num+1))})}
        else
        {
        alert('a')                      //=======================
        alert(selects[num].innerHTML)   //=======================
         removeListener(selects[num],'change',change);   //这里无法删除掉事件  好奇怪啊..
        // addListener(selects[num],'change',function(){change(selects,data[selects[num].selectedIndex].menu,(num+1))})
        }lz你要删除的应该是这个函数function(){change(selects,data[selects[num].selectedIndex].menu,(num+1))}而不是change
      

  3.   

     removeListener(selects[num],'change',function(){change(selects,data[selects[num].selectedIndex].menu,(num+1))});
    最直接这样
      

  4.   

    to 7楼
    这样删除不掉噢
    一个简单的例子<body>
    <div id='ss' style=" height:100px; width:100px; background-color:#0000FF"></div>
    <input value="add" type="button" onclick="ee(1)" /><input value="remove" type="button" onclick="ee(0)"/>
    <script>
    function $(Id){return document.getElementById(Id)};
    function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)} ;
    function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
    function ee(arg)
    {
    arg?addListener($('ss'),'click',function(){aall('s')}):removeListener($('ss'),'click',function(){aall('s')});
    };function aall(s){
    alert(s);
    };
    </script>
    </body>
      

  5.   

    自己顶一下
    需要解决的问题
    代码如下   删除掉带参事件<body>
    <div id='ss' style=" height:100px; width:100px; background-color:#0000FF"></div>
    <input value="add" type="button" onclick="ee(1)" /><input value="remove" type="button" onclick="ee(0)"/>
    <script>
    function $(Id){return document.getElementById(Id)};
    function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)} ;
    function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
    function ee(arg)
    {
            arg?addListener($('ss'),'click',function(){aall('s')}):removeListener($('ss'),'click',function(){aall('s')});
    };function aall(s){
        alert(s);
    };
    </script>
    </body>
      

  6.   

    如果arg == 0那么 arg 在
     arg?addListener($('ss'),'click',function(){aall('s')}):removeListener($('ss'),'click',function(){aall('s')}); 中代表的意思是 false ,当然不会去移除事件了
      

  7.   

    呃，没试过匿名函数。试下这样function change(selects,data,num,o){
        //alert(num)
        if(!selects[num])return;         //如果这个select不存在 返回   
        if(!data) return;                //如果没有数据源   返回
        selects[num].length=0                 //晴空掉options
    var bound=function(){change(selects,data[selects[num].selectedIndex].menu,(num+1))};
        for(var i=0;i<data.length;i++)       
        {selects[num].options.add(new Option(data[i].txt,i))}   //给select填充数据
        if(o)
        {addListener(selects[num],'change',bound)}
        else
        {
        alert('a')                      //=======================
        alert(selects[num].innerHTML)   //=======================
         removeListener(selects[num],'change',bound);   //这里无法删除掉事件  好奇怪啊..
        }
        o?(change(selects,data[selects[num].selectedIndex].menu,num+1,o)):(change(selects,data[selects[num].selectedIndex].menu,num+1))// 给后面的select填充数据 
    }
      

  8.   


    <body>
    <div id='ss' style=" height:100px; width:100px; background-color:#0000FF"></div>
    <input value="add" type="button" onclick="ee(1)" /><input value="remove" type="button" onclick="ee(0)"/>
    <script>
    function $(Id){return document.getElementById(Id)};
    function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)} ;
    function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
    var aa = null;
    function ee(arg)
    {
            arg?addListener($('ss'),'click',aa = function(){aall('s')}):removeListener($('ss'),'click',aa);//弄清添加和删除事件的句柄在哪
    };function aall(s){
        alert(s);
    };
    </script>
    </body>
      

  9.   

    未何在程序中不行了   梁超兄弟 指教下吧
    在添加事件的地方我alert(b)了  在删除事件的地方alert(a)  也就是说都执行到那里  但是事件没有删除掉呀
    <body>
    <div id='ss'></div>
    <script>
        var data = [ 
          {"txt":"人族","menu":[
                                    {"txt":"大法师","menu":[
                                                                {"txt":"水元素"},
                                                                  {"txt":"暴风雪"},
                                                                {"txt":"辉煌光环"},
                                                                {"txt":"瞬间移动"}
                                                                ]},
                                    {"txt":"山丘之王","menu":[
                                                                {"txt":"风暴之锤"},
                                                                  {"txt":"锥地"},
                                                                {"txt":"锥晕"},
                                                                {"txt":"天神下凡"}
                                                                ]},
                                    {"txt":"圣骑士","menu":[
                                                                {"txt":"光"},
                                                                  {"txt":"无敌"},
                                                                {"txt":"光环"},
                                                                {"txt":"复活"}
                                                                ]},
                                    {"txt":"血法师","menu":[
                                                                {"txt":"火焰"},
                                                                  {"txt":"吸蓝"},
                                                                {"txt":"虚无"},
                                                                {"txt":"神鸟凤凰"}
                                                                ]}
                                    ]},
          {"txt":"兽族","menu":[
                                    {"txt":"贱圣","menu":[
                                                                {"txt":"疾风步"},
                                                                  {"txt":"影分身"},
                                                                {"txt":"致命一击"},
                                                                {"txt":"剑刃风暴"}
                                                                ]},
                                    {"txt":"先知男","menu":[
                                                                {"txt":"狼"},
                                                                  {"txt":"日"},
                                                                {"txt":"闪电链"},
                                                                {"txt":"地震"}
                                                                ]},
                                    {"txt":"牛头人酋长","menu":[
                                                                {"txt":"冲击波"},
                                                                  {"txt":"阵地"},
                                                                {"txt":"耐久光环"},
                                                                {"txt":"复活"}
                                                                ]},
                                    {"txt":"小YY","menu":[
                                                                {"txt":"变动物"},
                                                                  {"txt":"治疗波"},
                                                                {"txt":"小蛇棒子"},
                                                                {"txt":"全体无敌"}
                                                                ]}
                                    ]},
          {"txt":"不死族","menu":[
                                    {"txt":"死亡骑士","menu":[
                                                                {"txt":"大便"},
                                                                  {"txt":"光环"},
                                                                {"txt":"吃人"},
                                                                {"txt":"复尸体"}
                                                                ]},
                                    {"txt":"巫妖","menu":[
                                                                {"txt":"暴冰"},
                                                                  {"txt":"冰甲"},
                                                                {"txt":"吃人"},
                                                                {"txt":"死亡凋零"}
                                                                ]},
                                    {"txt":"恐惧魔王","menu":[
                                                                {"txt":"蝙蝠"},
                                                                  {"txt":"睡觉"},
                                                                {"txt":"吸血光环"},
                                                                {"txt":"黄色石头人"}
                                                                ]},
                                    {"txt":"小强王子","menu":[
                                                                {"txt":"小小强"},
                                                                  {"txt":"倒刺"},
                                                                {"txt":"身上长倒刺"},
                                                                {"txt":"很多小小强"}
                                                                ]}
                                    ]}
       ]   
      
    function $(Id){return document.getElementById(Id)};
    function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)} 
     function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)}function create(elm,parent,fn){
        var element = document.createElement(elm);
        if(fn)fn(element);
        parent.appendChild(element);
    }   //父元素添加子元素  fn是个函数 用来对子元素做设置的 比如设置id classNamefunction  initialize(parent,num,title,data){                               //传建初始化界面
        for(var i = 0; i<num;i++)
            {
                 parent.innerHTML = parent.innerHTML+title[i];
                 create('select',parent,function(obj){
                 if(i==0){for(var j=0;j<data.length;j++)obj.options.add(new Option(data[j].txt,j))}
                 })
            }  //创见3个select 但是只在第个select中填充数据
            
            addListener(parent.getElementsByTagName("select")[0],'change',function(){change(parent.getElementsByTagName('select'),data[parent.getElementsByTagName("select")[0].selectedIndex].menu,1)})    //给第一个select添加事件    
            
            change(parent.getElementsByTagName('select'),data[0].menu,1,true)  //就是给后面的select填充数据        
    }function change(selects,data,num,o){
        //alert(num)
        if(!selects[num])return;         //如果这个select不存在 返回   
        if(!data) return;                //如果没有数据源   返回
        selects[num].length=0                 //晴空掉options
        for(var i=0;i<data.length;i++)       
        {selects[num].options.add(new Option(data[i].txt,i))}   //给select填充数据
        if(o)
        {
    alert('b')                //============================================添加事件的地方
    addListener(selects[num],'change',aa=function(){change(selects,data[selects[num].selectedIndex].menu,(num+1))})
    }
        else
        {
         alert('a')                        //============================================删除事件的地方
         removeListener(selects[num],'change',aa);   //这里无法删除掉事件  好奇怪啊..
        // addListener(selects[num],'change',aa=function(){change(selects,data[selects[num].selectedIndex].menu,(num+1))})
        }
        o?(change(selects,data[selects[num].selectedIndex].menu,num+1,o)):(change(selects,data[selects[num].selectedIndex].menu,num+1))// 给后面的select填充数据 
    }
    initialize($('ss'),3,['种族','英雄','技能'],data)
    </script>
    </body>
      

  10.   

    看了额
    把匿名函数给一个变量撒 if(o)
        {
        alert('b')                //============================================添加事件的地方
        addListener(selects[num],'change',aa=function(){change(selects,data[selects[num].selectedIndex].menu,(num+1))})
        }
        else
        {
         alert('a')                        //============================================删除事件的地方
         removeListener(selects[num],'change',aa);   //这里无法删除掉事件  好奇怪啊..
        // addListener(selects[num],'change',aa=function(){change(selects,data[selects[num].selectedIndex].menu,(num+1))})
        }哪写错了吗？？？
      

  11.   

    额  有道理 此aa非彼aa啊
    哈哈！~