Javascript函数被调用的次数太多

我有一个函数，它应该把一个数增加一 在每次单击按钮时，该函数仅在第一次调用时才能正常工作，然后由于调用该函数的次数过多，该函数的数目会大大增加。 有人能解释一下发生了什么，我如何按照我已经说过的模式修复它吗

“严格使用”；
var button=document.getElementsByClassName（'button'）[0]，
targetElement=document.GetElementsByCassName（'view-box'）[0]；
var NumView=函数NumView（元素、按钮）{
this.element=元素；
this.button=按钮；
};
NumView.prototype.render=函数render（）{
this.element.innerHTML=this.num；
this.button.addEventListener（'click'，changeValue.bind（this））；
函数changeValue（）{
这个是.num++；
这个。render（）；
}
};
var NumController=函数NumController（numView）{
this.numView=numView；
};
NumController.prototype.initialize=函数初始化（）{
这个.onLoadShowNum（）；
};
NumController.prototype.onLoadShowNum=函数onLoadShowNum（）{
this.numView.num=0；
this.numView.render（）；
};
（函数初始化（）{
var视图=新NumView（targetElement，按钮），
控制器=新NumController（视图）；
controller.initialize（）；
})();
.container{
宽度：100%；
背景：银；
文本对齐：居中；
}
.视图框{
边框：5px纯红；
填充物：5px；
背景：白色；
}
.按钮{
线高：2.4；
利润率：25px；
}

点击
每次单击按钮时，您都在添加eventListener

就这样做吧

首次创建按钮时，使用单击事件绑定按钮


“严格使用”；
var button=document.getElementsByClassName（'button'）[0]，
targetElement=document.GetElementsByCassName（'view-box'）[0]；
var NumView=函数NumView（元素、按钮）{
this.element=元素；
this.button=按钮；
/*把它放在这里*/
this.button.addEventListener（'click'，changeValue.bind（this））；
函数changeValue（）{
这个是.num++；
这个。render（）；
}
};
NumView.prototype.render=函数render（）{
this.element.innerHTML=this.num；
/*离开这里*/
/*
this.button.addEventListener（'click'，changeValue.bind（this））；
函数changeValue（）{
这个是.num++；
这个。render（）；
}
//这被多次调用。1+2+3+4+。。
*/
};
var NumController=函数NumController（numView）{
this.numView=numView；
};
NumController.prototype.initialize=函数初始化（）{
这个.onLoadShowNum（）；
};
NumController.prototype.onLoadShowNum=函数onLoadShowNum（）{
this.numView.num=0；
this.numView.render（）；
};
（函数初始化（）{
var视图=新NumView（targetElement，按钮），
控制器=新NumController（视图）；
controller.initialize（）；
})();
.container{
宽度：100%；
背景：银；
文本对齐：居中；
}
.视图框{
边框：5px纯红；
填充物：5px；
背景：白色；
}
.按钮{
线高：2.4；
利润率：25px；
}

点击
每次单击按钮时，您都在添加eventListener

就这样做吧

首次创建按钮时，使用单击事件绑定按钮


“严格使用”；
var button=document.getElementsByClassName（'button'）[0]，
targetElement=document.GetElementsByCassName（'view-box'）[0]；
var NumView=函数NumView（元素、按钮）{
this.element=元素；
this.button=按钮；
/*把它放在这里*/
this.button.addEventListener（'click'，changeValue.bind（this））；
函数changeValue（）{
这个是.num++；
这个。render（）；
}
};
NumView.prototype.render=函数render（）{
this.element.innerHTML=this.num；
/*离开这里*/
/*
this.button.addEventListener（'click'，changeValue.bind（this））；
函数changeValue（）{
这个是.num++；
这个。render（）；
}
//这被多次调用。1+2+3+4+。。
*/
};
var NumController=函数NumController（numView）{
this.numView=numView；
};
NumController.prototype.initialize=函数初始化（）{
这个.onLoadShowNum（）；
};
NumController.prototype.onLoadShowNum=函数onLoadShowNum（）{
this.numView.num=0；
this.numView.render（）；
};
（函数初始化（）{
var视图=新NumView（targetElement，按钮），
控制器=新NumController（视图）；
controller.initialize（）；
})();
.container{
宽度：100%；
背景：银；
文本对齐：居中；
}
.视图框{
边框：5px纯红；
填充物：5px；
背景：白色；
}
.按钮{
线高：2.4；
利润率：25px；
}

点击
每次调用
render
时，您都在向按钮添加另一个事件处理程序。您有一个很好的2倍计数器。每次调用
render
时，您都在向按钮添加另一个事件处理程序，您有一个很好的2倍计数器。