javascript浏览器兼容教程之事件处理

  1. window.event

  【分析说明】先看一段代码

  

复制代码 代码如下:

  function et()

  {

  alert(event);//IE: [object]

  }

  以上代码在IE运行的结果是[object],而在Firefox无法运行。

  因为在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口。

  【兼容处理】添加对event判断,根据浏览器的不同来得到正确的event:

  

复制代码 代码如下:

  function et()

  {

  evt=evt?evt:(window.event?window.event:null);

  //兼容IE和Firefox

  alert(evt);

  }

  2. 键盘值的取得

  【分析说明】IE和Firefox获取键盘值的方法不同,可以理解,Firefox下的event.which与IE下的event.keyCode相当。关于彼此不同,可参考《键盘事件中keyCode、which和charCode 的兼容性测试》

  【兼容处理】

  复制代码

  

复制代码 代码如下:

  function myKeyPress(evt){

  //兼容IE和Firefox获得keyBoardEvent对象

  evt = (evt) ? evt : ((window.event) ? window.event : "")

  //兼容IE和Firefox获得keyBoardEvent对象的键值

  var key = evt.keyCode?evt.keyCode:evt.which;

  if(evt.ctrlKey && (key == 13 || key == 10)){

      //同时按下了Ctrl和回车键

  //do something;

  }

  }

  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。

  【兼容处理】最简单的兼容性处理就是封装这两套接口:

  

复制代码 代码如下:

  function addEvent(elem, eventName, handler) {

  if (elem.attachEvent) {

    elem.attachEvent("on" + eventName, function(){

                    handler.call(elem)});

    //此处使用回调函数call(),让this指向elem

  } else if (elem.addEventListener) {

    elem.addEventListener(eventName, handler, false);

  }

  }

  function removeEvent(elem, eventName, handler) {

  if (elem.detachEvent) {

    elem.detachEvent("on" + eventName, function(){

                    handler.call(elem)});

    //此处使用回调函数call(),让this指向elem

  } else if (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。复杂点还要考虑绝对位置。

  

复制代码 代码如下:

  function getAbsPoint(e){

  var x = e.offsetLeft, y = e.offsetTop;

  while (e = e.offsetParent) {

  x += e.offsetLeft;

  y += e.offsetTop;

  }

  alert("x:" + x + "," + "y:" + y);

  }