关于js中事件重复绑定的问题

JavaScript090

关于js中事件重复绑定的问题,第1张

在写一个项目,有一个触发编辑按钮才会出现编辑板块,然后编辑板块中有点击添加的事件。当保存编辑,编辑板块消失。再次点击编辑,再点击添加,会触发多次,生成多个模块。

经过多次反复痛苦的调试,发现是在点击编辑后调用的函数中绑定了添加的事件,当再次点击编辑时,会重复绑定,所以会出现触发多次的bug。

解决方法就是在绑定之前先解绑。

这样就可以解决了。jquery中还有很多类似的处理,比如说运行一个动画前先将之前的动画stop()掉。

不过在解绑事件时最好将具体的元素写入,因为在事件委托时,不写明具体,解绑会将所有事件解绑

上述例子只会触发alert(3),因为点击btn1时,解绑了所有在body上的click事件,只会调用在最后绑定的alert(3)。

应该写成

想必大家都有遇到过,DOM动态添加的元素,你给它绑定的事件是不起作用的。目前有两种办法,为动态添加的元素绑定事件

⚠️ 动态添加的子元素一定要放在on()方法里面,并且on()方法里面的 childSelector 必须要是 selector 的子元素,否则动态添加的元素绑定的事件依旧无效

事件绑定相当于在一个元素上进行监听,监听事件是否触发。

普通事件就是直接触发事件。

两者的区别就在于是否可重复使用。

事件绑定可以在一个元素上监听同一事件多次,而普通事件多次写会被覆盖。如:

var ys1 = ‘某个元素监听(绑定)’,ys2 = ‘另一个元素(普通事件)’

ys1.addEventListener('click',function () {

    alert(1)

})

ys1.addEventListener('click',function () {

    alert(2)

})

//会弹出1,2;

ys2.onclick = function(){

    alert(1)

}

ys2.onclick = function(){

    alert(2)

}

//只会弹出2.