關於原生事件綁定中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)
})