用attachevent和addEventListner添加事件不会被覆盖,但是有兼容性问题,因此封装了一个函数,可以用来添加事件,移除事件
function addEvent(elem,type,handler){
if(elem.addEventListener){
elem.addEventListener(type,handler)
}else if(elem.attachEvent){
}
elem.attachEvent("on"+type,function(){
handler.call(elem)
})
}else{
elem["on"+type]=handle
}
}
移除事件
function removeEvent(elem,type,handler){
if(elem..removeEventListene){
elem.removeEventListener(type,handle)
}else if(elem.detachEvent){
elem.detachEvent("on"+type,handle)
}else{
elem["on"+type]=null
}
}
因为attachEvent中的this值指向window,所以我们要用call将其this值改为事件源。
调用
function fn(){
alert(1111);
}
addEvent(oDiv1,"click",fn)
removeEvent(oDiv1,"click",fn)
会产生一个问题,移除事件是不好使的,因为添加的处理函数和移除的处理函数不是同一函数
为了确保处理的函数是同一个函数我使用了给对象下面添加一个函数属性,这样处理的函数就为同一个函数。
这样做
else if(elem.attachEvent){
elem.fn=function(){
handle.call(elem);//改变this指向
}
elem.attachEvent("on"+type,elem.fn)
}
else if(elem.detachEvent){
elem.detachEvent("on"+type,elem.fn)
}
这样就可以移除事件了,添加事件和移除事件就是一个事件了。
如果我们添加多个事件,并移除
function fn1(){
alert(1111);
}
function fn2(){
alert(2222);
}
addEvent(oDiv1,"click",fn1)
addEvent(oDiv1,"click",fn2)
removeEvent(oDiv1,"click",fn1)
removeEvent(oDiv1,"click",fn2)
运行的结果是弹出的是1111,因为我们elem.fn 时,刚开始elem.fn 指向的fn1 后来再addEvent(oDiv1,"click",fn2)后,elem.fn 就是fn2,fn1被覆盖掉了,此时在移除事件时,移除的是fn2,因此fn1事件没有被移除,我们给elem下加一个变量来存函数elem[type+handle]
最后完善的代码是这样的
添加事件
function addEvent(elem,type,handler){
if(elem.addEventListener){
elem.addEventListener(type,handler)
}else if(elem.attachEvent){
elem[type+handler]=function(){
handle.call(elem);//改变this指向
}
elem.attachEvent("on"+type,elem[type+handler])
}else{
elem["on"+type]=handle
}
}
移除事件
function removeEven(elem,type,handler){
if(elem..removeEventListene){
elem.removeEventListener(type,handle)
}else if(elem.detachEvent){
elem.detachEvent("on"+type,elem[type+handler])
}else{
elem["on"+type]=null
}
}