经过多次反复痛苦的调试,发现是在点击编辑后调用的函数中绑定了添加的事件,当再次点击编辑时,会重复绑定,所以会出现触发多次的bug。
解决方法就是在绑定之前先解绑。
这样就可以解决了。jquery中还有很多类似的处理,比如说运行一个动画前先将之前的动画stop()掉。
不过在解绑事件时最好将具体的元素写入,因为在事件委托时,不写明具体,解绑会将所有事件解绑
上述例子只会触发alert(3),因为点击btn1时,解绑了所有在body上的click事件,只会调用在最后绑定的alert(3)。
应该写成
事件绑定相当于在一个元素上进行监听,监听事件是否触发。
普通事件就是直接触发事件。
两者的区别就在于是否可重复使用。
事件绑定可以在一个元素上监听同一事件多次,而普通事件多次写会被覆盖。如:
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.
js中可以改变方法作用域和参数的方式有三种,apply,call,bind.
apply 和call类似第一个参数是方法的作用域,其它参数是方法的参数。不同的是apply的其它参数是个数组,数组的个数为参数的个数,call除开第一个参数其它参数方法参数,例子如下
function method() {console.log(this, arguments)
}
var a = 1
var b = 2, c = 3, d = 4
method.call(a, b, c, d)// 打印 [Number: 1] { '0': 2, '1': 3, '2': 4 }
method.apply(a, [b, c, d])// 同上 [Number: 1] { '0': 2, '1': 3, '2': 4 }
bind 和call参数传递方式一致,唯一区别是bind不会立即执行,只会更改作用域和方法参数,到真正执行方法时才会执行。
var t = method.bind(a, b)t()// [Number: 1] { '0': 2 }
t = t.bind(null, c)
t()// [Number: 1] { '0': 2, '1': 3 }
t = t.bind(null, d)
t() // [Number: 1] { '0': 2, '1': 3, '2': 4 }
可以采用bind方法进行更改事件绑定的方法的参数及作用域。