关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attachEvent函数中this指代window问题

时间:2021-06-20 04:36:37

在原生事件绑定中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)


})