addEventListener重复绑定问题

[a229513407]

var checkbox={
checkAllBox:'checkAllBox',
uncheck:'uncheck',
data_checked:'data-checked',
checkbox_css:'checkbox-css',
checked:'checked',
cancelCheck:'cancelCheck',
select_one:function () {
const checkAllBox=this.checkAllBox;
const uncheck=this.uncheck;
const checkbox_css=this.checkbox_css;
const checked=this.checked;
const cancelCheck=this.cancelCheck;
var checkOneBox_css=document.querySelectorAll('.'+checkbox_css);
for(var i=0;i<checkOneBox_css.length;i++){
(function (i){
if(checkOneBox_css[i].className.indexOf(uncheck)===-1){
checkOneBox_css[i].addEventListener('click',function (event) {
console.log(event.target);
event.stopPropagation();
var event_name=event.target.className;
if(event.target===this&&event.target.className.indexOf(checkAllBox)===-1){
if(event_name.indexOf(checked)!==-1){
console.log(13);
event.target.className=event_name.replace(checked,cancelCheck);
}else{
console.log(12);
if(event_name===checkbox_css){
event.target.className +=' '+checked;
}else{
event.target.className=event_name.replace(cancelCheck,checked);
}
}
}
},false);
}
})(i);
}
},
checkbox:function () {
this.select_one();
}
};
每次调用 checkbox.checkbox()时候，addEventListener都会重复绑定。。。。该怎么办啊。。。

[a229513407]

我知道 有removeEventListener，可是在我这个方法里怎么用呢。。。。

[a229513407]

其实 主要问题 还是 构造函数中 怎么定义一个共有的方法我好去removeEventListener

[a229513407]

我把 checkOneBox_css[i].addEventListener('click',function (event) {}) 我把这句话function 后加了个方法名，还是不行啊。。。

[x80819091]

removeEventListener("event",functionName)

[当作看不见]

给事件添加一个方法名 ,就不会重复绑定了, js原生的方法绑定比 jq的慢 ,原因在于,js 绑定事件前,会去寻找是否有绑定有同名方法,有的话就不会重复绑定,而 jq是直接绑定. 例如

	document.getElementById("body").addEventListener("click",alert1)

	document.getElementById("body").addEventListener("click",alert1)
	function alert1(){
		alert(1);
	}
	function alert2(){
		alert(1);
	}
//审查元素.只绑定了一个事件
/*********************************/
	document.getElementById("body").addEventListener("click",alert1)

	document.getElementById("body").addEventListener("click",alert2)
	function alert1(){
		alert(1);
	}
	function alert2(){
		alert(1);
	}
//绑定了两个

[当作看不见]

引用 5 楼 a229513407 的回复:

我把 checkOneBox_css[i].addEventListener('click',function (event) {}) 我把这句话function 后加了个方法名，还是不行啊。。。

不行,必须直接填外部定义的方法名, 绑定事件中,不加方法名是匿名函数 ,作用范围是这个语句之类,加了方法的作用域也还是一样,所以不会帮你去重,需要在绑定事件之外声明的方法(作用域在绑定事件之外),然后直接填方法名才能自动帮你去重

[a229513407]

所以我才贴了源代码 想知道 我上面 这种方式 怎么声明方法....