重复绑定事件问题

Question

我想在点击一个div后显示边框并且能够改变它的svg子元素中的元素

for(var j=0;j<divList.length;j++){
            (function(el){
                divList[el].onclick=function(){                
                    gg=divArray[el];//gg为选中的元素的svgdocument
                    init(gg);//将选中的元素传入函数进行修改
                };
            })(j);
        }    function init(elem){        var mouthSetting=document.getElementById("mouthSet");        
        //mouthsetting为range滚动条的ID
        var svgMouth=elem.getElementById("mouth");        //获取svg的某个子元素
        mouthSetting.addEventListener("change",test,false);        //为range绑定事件
        
    function test(){
            svgMouth.setAttribute("d","M 40 115 Q 60 "+this.value*150+" 75 115");}

但问题是当我打开文件第一次点击某个图像时。是可以通过range调整嘴巴的角度，但当我选择另外一个图像时，调整range，两个图像的嘴巴角度都会变化！！
请问这是为什么？绑定事件为什么会重复？新手求助~谢谢

Answer 1

你为同一个元素（mouseSetting）绑定了 n 个&nbsp;"change"&nbsp;事件，其实质是为这个元素的 change 事件添加了 n 个处理函数，当这个元素发生改变时，会遍历所有 change 处理函数，依次调用。所以就出现了你看到的现象。你只需要绑定一个 change 事件处理函数，然后在这个函数里，获取当前人物的嘴巴来改变状态。而当前人物则是由 click 事件设置的，代码大概如下var&nbsp;current;for&nbsp;(var&nbsp;j&nbsp;=&nbsp;0;&nbsp;j&nbsp;<&nbsp;divList.length;&nbsp;j++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;(function(el)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divList[el].onclick&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;current&nbsp;=&nbsp;divArray[el];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;gg&nbsp;=&nbsp;divArray[el];//gg为选中的元素的svgdocument &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;init(gg);//将选中的元素传入函数进行修改 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;})(j); }function&nbsp;init(/*elem*/)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;mouthSetting&nbsp;=&nbsp;document.getElementById("mouthSet");&nbsp;&nbsp;&nbsp;&nbsp;//mouthsetting为range滚动条的ID &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;var&nbsp;svgMouth&nbsp;=&nbsp;elem.getElementById("mouth"); &nbsp;&nbsp;&nbsp;&nbsp;//获取svg的某个子元素 &nbsp;&nbsp;&nbsp;&nbsp;mouthSetting.addEventListener("change",&nbsp;test,&nbsp;false);&nbsp;&nbsp;&nbsp;&nbsp;//为range绑定事件 &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;test()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!current)&nbsp;{&nbsp;return;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;svgMouse&nbsp;=&nbsp;current.getElementById("mouth"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;svgMouth.setAttribute("d",&nbsp;"M&nbsp;40&nbsp;115&nbsp;Q&nbsp;60&nbsp;"&nbsp;+&nbsp;this.value&nbsp;*&nbsp;150&nbsp;+&nbsp;"&nbsp;75&nbsp;115"); &nbsp;&nbsp;&nbsp;&nbsp;} } init();