重复绑定事件问题

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 个 "change" 事件，其实质是为这个元素的 change 事件添加了 n 个处理函数，当这个元素发生改变时，会遍历所有 change 处理函数，依次调用。所以就出现了你看到的现象。

你只需要绑定一个 change 事件处理函数，然后在这个函数里，获取当前人物的嘴巴来改变状态。而当前人物则是由 click 事件设置的，代码大概如下

var current;for (var j = 0; j < divList.length; j++) {
    (function(el) {
        divList[el].onclick = function() {
            current = divArray[el];            // 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() {        if (!current) { return; }        var svgMouse = current.getElementById("mouth");
        svgMouth.setAttribute("d", "M 40 115 Q 60 " + this.value * 150 + " 75 115");
    }
}

init();