经过多次反复痛苦的调试,发现是在点击编辑后调用的函数中绑定了添加的事件,当再次点击编辑时,会重复绑定,所以会出现触发多次的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.