js中事件绑定attachEvent与addEventlistener的兼容性及this指向的统一

       在原生js中用到事件绑定时，要考虑到浏览器的兼容性。IE浏览器中为attachEvent，FireFox与chrome中用法为addEventListener，并且事件绑定中的this指向也不一样，用法如下：

　　attachEvent(事件,函数)

　　例：var oBtn = document.getElementById('button');

　　oBtn.addachEvent('onclick',function(){

　　　　alert('a');

　　})

　　addEventListener(事件,函数,false)

　　例：var oBtn = document.getElementById('button');

　　oBtn.addEventListener('click',function(){

　　　　alert('a');

　　},false)

　　上面大家可以看到运用事件绑定的时候，事件的区别 一个是用onclick 一个是用click，所以FireFox与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');

　　})

　　考虑到函数中如果使用this，例如：

　　addEvent(oBtn,'click',function(){

　　　　alert(this);

　　})

　　得到的结果是不一样的 this在IE中弹出的window，在FireFox与chrome中指代的是当前对象

　　如果要统一this指向当前对象，调用函数addEvent需要统一this指向，如下：

addEvent(oBtn,'click',function(ev){

　　var oEvent = ev||event;

　　var that=oEvent.srcElement||oEvent.target;

　　alert(that)

})

 

来源：oschina

链接：https://my.oschina.net/u/4306388/blog/3892514