`
小嘴冰凉
  • 浏览: 456941 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE和Firefox下event乱谈

    博客分类:
  • js
阅读更多

如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,因为javascript的事件模型有三种,它们分别是NN4、IE4+和W3C/Safari;这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。首先看如下代码:

function doEventThing(eventTag){     
   var event = eventTag||window.event;     
   var currentKey = event.charCode||event.keyCode;     
   var eventSource =window.event.srcElement||eventTag.target;     
}
    
  这段代码主要是为了处理键盘事件的,在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口,在上述函数中, 
eventTag扮演的就是这个角色。 
  var event = eventTag||window.event; 
  这段代码可以根据浏览器的不同来得到正确的event,并在程序中使用,如果在IE4+下面使用这段代码,因为eventTag为null可以保证event = window.event,但是如果在Firefox下运行的话则因为手工的给定了eventTag所以var event = eventTag。根据对这一段代码的分析我们也不难看出可以对doEventThing方法进行如下的改造(因为javascript允许我们在定义function的时候不明确指出参数的数量): 

function doEventThing(){     
    var event = arguments[0]||window.event;     
     //other code     
} 
   
  在Firefox下arguments[0]在特定的场合(没有显式的指定function参数数量的时候)被做为传播事件的参数来使用………… 
  至于var currentKey = event.charCode||event.keyCode;也是不同的浏览器所致,在IE4+下面记录键盘的是keyCode,但是在Firefox下的却是charCode,为此我们需要处理他们的差异。 
  还有一个差异就是事件源的获取:通过语句
  var eventSource = window.event.srcElement||eventTag.target;
  我们也看到了IE与W3C的不同。 
  经过上面的包装,我们基本上可以在IE4+和Firefox下面顺利的使用事件机制了,当然如果为了通用性可以对这种差异进封装来形成自己的Event对象在程序中误差别的使用事件对象,这里就不在介绍了。 
    
  接下来分析事件的绑定:大概分为如下5种 
  1、绑定到元素,这也是比较常见的一种比如: 
  <input type="button" onclick="doEventThing(event)">    
,这样我们就把doEventThing绑定到了该button对象上,点击此按钮事件就被触发。 
  2、绑定事件到对象:这也是比较常见的一种,特别是在IE4+下面: 
  document.getElementById("divid").onclick = doEventThing; 
  3、使用<script for>进行事件的绑定,这只在IE4+下有用(为buttong1绑定事件,逻辑在script块中书写event来指定怎么触发事件): 

<script event="onclick" for="button1"> 
 // script statements here 
</script>
 
   4、使用 IE5/Windows 的 attachEvent() 方法      
   5、使用 W3C DOM 的 addEventListener() 方法
  addEventListener("eventType",listenerReference,captureFlag); 
  第三个参数则是一个 Boolean 值,指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说,第三个参数应该为false(假)。 

  prototype在绑定事件的时候兼容IE和W3C的时候做的处理如下: 

_observeAndCache: function(element, name, observer, useCapture) {     
   if (!this.observers) this.observers = [];     
   if (element.addEventListener) {//W3C DOM     
     this.observers.push([element, name, observer, useCapture]);     
     element.addEventListener(name, observer, useCapture);     
   } else if (element.attachEvent) {//IE5/Windows     
     this.observers.push([element, name, observer, useCapture]);     
     element.attachEvent(’on’ + name, observer);     
   }     
}
    
撇开this.observers.pust([element,name,observer,useCapture])不谈,我们对4、5所说的事件绑定就很清楚了。我们知道prototype的此方法的useCapture在IE下没有作用,只对W3C的事件处理机制起作用

分享到:
评论

相关推荐

    兼容IE和FireFox的event(事件)的对象获得

    兼容IE和FireFox的event(事件)的对象获得,直接下载引用即可

    event兼容调用(IE,Firefox,Chrome)

    ### event兼容调用详解——IE,Firefox,Chrome 在跨浏览器开发中,处理事件(event)的兼容性问题是一项常见的挑战。不同的浏览器对事件模型的支持程度不同,这导致了开发者在编写JavaScript代码时需要考虑多种...

    js在IE和fireFox的区别

    ### JavaScript在Internet Explorer (IE) 和 Firefox 中的区别与解决方案 #### 一、获取HTML元素的方式差异 1. **通过ID获取元素**: - **IE**:支持`document.getElementById`和`document.all`两种方式。 - ...

    JavaScript在IE和Firefox(火狐)的不兼容问题解决

    这表明文章旨在探讨并提供解决方案来处理在不同浏览器环境下的JavaScript兼容性问题,尤其是在Internet Explorer(IE)和Mozilla Firefox(火狐)这两个浏览器上。下面将深入解析文件中的部分代码示例,以及给出的一...

    js在IE和Firefox不同之处

    另外,`event.layerX`属性在IE和Firefox中都有,但在具体的意义上可能存在差异,需要进一步测试确认。 #### 4. HTML对象的ID作为对象名的问题 在IE中,可以直接通过HTML对象的ID作为`document`的下属对象变量名来...

    兼容IE和Firefox获得keyBoardEvent对象

    window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。Firefox必须从源处加入event作参数传递。IE忽略该参数,用window.event来读取该event。解决方法是if(typeof...

    Javascript的IE和Firefox(火狐)兼容性

    ### Javascript的IE与Firefox(火狐)兼容性解决方案 在Web开发过程中,浏览器兼容性问题一直是开发者们关注的重点之一。由于不同的浏览器对于Web标准的支持程度存在差异,这导致了同样的代码在不同浏览器中的表现...

    Javascript的IE和Firefox兼容性参考

    - IE的事件对象`event`有`x`和`y`属性,表示鼠标位置,而Firefox使用`event.pageX`和`event.pageY`。为了兼容,可以使用`event.clientX`和`event.clientY`,这两个属性在IE和Firefox中都可用。如果需要精确的坐标,...

    ie 和 firefox 的javascript 兼容问题(网上下载的).doc

    在事件处理中,IE 和 Firefox 对 `window.event` 的支持不同。 **说明:** - **IE环境下**,可以使用 `window.event`。 - **Firefox环境下**,不支持 `window.event`,必须在事件处理函数中传递事件对象。 **解决...

    Javascript在IE和FireFox中的兼容处理

    - IE使用`event.clientX`和`event.clientY`,Firefox使用`event.pageX`和`event.pageY`。可以使用`event.clientX + document.body.scrollLeft`和`event.clientY + document.body.scrollTop`来兼容。 7. **event的...

    同时兼容IE和FireFox的事件处理event代码--添加文件上传例子

    "同时兼容IE和FireFox的事件处理event代码--添加文件上传例子"这个主题聚焦于解决浏览器之间的差异,尤其是针对老版本的Internet Explorer(IE)和Firefox。在这些早期浏览器中,事件处理的实现方式有所不同,导致...

    ie与firefox下的event使用说明与详细区别

    在获取鼠标当前位置方面,IE浏览器使用`event.x`和`event.y`,而Firefox则使用`event.pageX`和`event.pageY`。为了确保兼容性,开发者通常会使用`event.clientX`和`event.clientY`,这两个属性在IE和Firefox中都可用...

    IE和Firefox差异参考大全

    在互联网的早期,IE(Internet Explorer)和Firefox(火狐浏览器)是两个主要的Web浏览平台,它们在处理CSS(层叠样式表)和JavaScript方面存在显著的差异。这些差异对于开发者来说至关重要,因为它们影响了网站在...

    js在ie和FireFox下兼容问题汇总

    - 在Firefox中,可以使用`event.pageX`和`event.pageY`代替,但在IE中需要使用`event.clientX`和`event.clientY`。为了在两种浏览器间保持一致,可以计算`mX = event.x ? event.x : event.pageX`,之后使用`mX`。 ...

    IE和firefox浏览器的event事件兼容性汇总

    IE浏览器通过`event.x`和`event.y`获取鼠标点击的相对位置(相对于窗口),而Firefox则使用`event.pageX`和`event.pageY`(相对于文档)。为了兼容,需要自定义逻辑来计算绝对位置: ```javascript function do...

    火狐下event的使用

    在Firefox和IE中,获取父元素的方法也有所不同: - **Firefox**: 使用`element.parentNode`。 - **IE**: 使用`element.parentElement`。 为了兼容这两种情况,可以使用以下代码: ```javascript var ...

    Javascript的IE和Firefox兼容性问题集合

    然而,由于不同的浏览器对JavaScript的支持程度和实现方式存在差异,尤其是Internet Explorer(IE)和Firefox这两款流行浏览器,开发者经常需要面对兼容性问题。以下是一些常见的JavaScript在IE和Firefox上的兼容性...

    BlueBala » 兼容IE和Firefox的事件模型(拖动)

    本文将深入探讨如何创建一个兼容Internet Explorer(IE)和Firefox浏览器的事件模型,特别是在实现拖动功能时所面临的挑战和解决方案。 首先,我们需要理解IE和Firefox在事件处理上的差异。在IE中,事件处理主要...

    IE和Firefox在css,JavaScript方面的兼容性

    IE使用`event.x`和`event.y`,而Firefox使用`event.pageX`和`event.pageY`。为了兼容这两种浏览器,可以采用以下代码: ```javascript mX = event.x ? event.x : event.pageX; ``` ### 10. 事件源元素的获取 在...

Global site tag (gtag.js) - Google Analytics