javascript浏览器兼容教程之事件处理
1.window.event
【分析说明】先看一段代码
functionet()
{
alert(event);//IE:[object]
}
以上代码在IE运行的结果是[object]，而在Firefox无法运行。
因为在IE中event作为window对象的一个属性可以直接使用，但是在Firefox中却使用了W3C的模型，它是通过传参的方法来传播事件的，也就是说你需要为你的函数提供一个事件响应的接口。
【兼容处理】添加对event判断，根据浏览器的不同来得到正确的event：
functionet()
{
evt=evt?evt:(window.event?window.event:null);
//兼容IE和Firefox
alert(evt);
}
2.键盘值的取得
【分析说明】IE和Firefox获取键盘值的方法不同，可以理解，Firefox下的event.which与IE下的event.keyCode相当。关于彼此不同，可参考《键盘事件中keyCode、which和charCode的兼容性测试》
【兼容处理】
复制代码
functionmyKeyPress(evt){
//兼容IE和Firefox获得keyBoardEvent对象
evt=(evt)?evt:((window.event)?window.event:"")
//兼容IE和Firefox获得keyBoardEvent对象的键值
varkey=evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey&&(key==13||key==10)){
//同时按下了Ctrl和回车键
//dosomething;
}
}
3.事件源的获取
【分析说明】在使用事件委托的时候，通过事件源获取来判断事件到底来自哪个元素，但是，在IE下，event对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
【兼容处理】
ele=function(evt){//捕获当前事件作用的对象
evt=evt||window.event;
return
(obj=event.srcElement?event.srcElement:event.target;);
}
4.事件监听
【分析说明】在事件监听处理方面，IE提供了attachEvent和detachEvent两个接口，而Firefox提供的是addEventListener和removeEventListener。
【兼容处理】最简单的兼容性处理就是封装这两套接口：
functionaddEvent(elem,eventName,handler){
if(elem.attachEvent){
elem.attachEvent("on"+eventName,function(){
handler.call(elem)});
//此处使用回调函数call()，让this指向elem
}elseif(elem.addEventListener){
elem.addEventListener(eventName,handler,false);
}
}
functionremoveEvent(elem,eventName,handler){
if(elem.detachEvent){
elem.detachEvent("on"+eventName,function(){
handler.call(elem)});
//此处使用回调函数call()，让this指向elem
}elseif(elem.removeEventListener){
elem.removeEventListener(eventName,handler,false);
}
}
需要特别注意，Firefox下，事件处理函数中的this指向被监听元素本身，而在IE下则不然,可使用回调函数call，让当前上下文指向监听的元素。
5.鼠标位置
【分析说明】IE下，even对象有x，y属性，但是没有pageX，pageY属性；Firefox下，even对象有pageX，pageY属性，但是没有x，y属性。
【兼容处理】使用mX(mX=event.x?event.x:event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。复杂点还要考虑绝对位置。
functiongetAbsPoint(e){
varx=e.offsetLeft,y=e.offsetTop;
while(e=e.offsetParent){
x+=e.offsetLeft;
y+=e.offsetTop;
}
alert("x:"+x+","+"y:"+y);
}