使用onclick绑定事件没办法绑定多个事件:
//案例
document.onclick = function () {
console.log("第一句");
}
document.onclick = function () {
console.log("第二句");
}
执行结果:只输出“第二句”,因为前面的事件被覆盖了
问题:绑定一个新的,原来的就得被覆盖掉。
解决思路:绑定之前,先把事件的驱动程序记录下来。触动的时候,先把老事件执行一下就可以了。
事件监听原理:
我们可以自己封装一个方法,让onclick也可以实现多个事件的绑定。
function eventListener(ele,eve,fun){
var oldEvent = ele["on"+eve];
//重新绑定事件
ele["on"+eve] = function(){
//判断老事件是否存在,如果存在,先执行老事件,在执行新事件
//1.如果存在,老事件=事件的绑定函数 == 整个函数 == true 。
//2.如果不存在,是null ==false.
//if(typeof oldEvent == "function"){
if(oldEvent){
oldEvent();//如果存在那么先执行老事件,在执行新事件,
fun();
}else{
fun();
}
}
}
上面封装的方法是事件监听addEventListener()的原理。
如果是IE678的attachEvent();它后绑定的事件先执行,所以需要先执行新事件,再执行老事件。