本文详细介绍了在原生事件绑定中如何根据不同浏览器（如IE、FF、Chrome）使用不同的方法（attachEvent与addEventListener），并讨论了事件名称的差异以及如何通过封装函数来解决兼容性问题。此外，文章还展示了当事件处理函数中包含`this`关键字时，不同浏览器的表现差异，并提供了解决方案。
在原生事件绑定中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)
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
