关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attachEvent函数中this指代window问题
在原生事件绑定中IE绑定中需要用到attachEvent,FF与chrome中需要用到addEventListener.
attachEvent(事件,函数)
例如:var oBtn = document.getElementById('button');
oBtn.addachEvent('onclick',function(){
alert('a');
})
oBtn.addachEvent('onclick',function(){
alert('b');
})
addEventListener(事件,函数,false)
例如:var oBtn = document.getElementById('button');
oBtn.addEventListener('click',function(){
alert('a');
},false)
oBtn.addEventListener('click',function(){
alert('b');
},false)
上面大家可以看到运用事件绑定的时候,事件的区别 一个是用onclick 一个是用到click,所以FF与chrome中的事件是不带on,而IE是必须带on的
由于出现兼容性的问题 需要封装函数
function addEvent(obj,ev,fn){
if(obj.attachEvent){
//针对IE浏览器
obj.attachEvent('on'+ev,fn)
}else{
//针对FF与chrome
obj.addEventListener(ev,fn,false)
}
}
所以上述的实例可以改写成
addEvent(oBtn,'click',function(){
alert('a');
})
addEvent(oBtn,'click',function(){
alert('b');
})
但是函数中如果出现this的话
例如:
addEvent(oBtn,'click',function(){
alert(this);
})
得到的结果是不一样的 this在IE中弹出的window,在FF与chrome中指代的是当前对象
如果要用到当前对象需要对函数进一步改造
addEvent(oBtn,'click',function(ev){
var oEvent = ev||event;
var that=oEvent.srcElement||oEvent.target;
alert(that)
})