如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,因为javascript的事件模型有三种,
它们分别是NN4、IE4+和W3C/Safari;这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event
在IE4+和Firefox下的正常工作。首先看如下代码:
functiondoEventThing(eventTag){
varevent=eventTag||window.event;
varcurrentKey=event.charCode||event.keyCode;
vareventSource=window.event.srcElement||eventTag.target;
}
这段代码主要是为了处理键盘事件的,在IE中event作为window对象的一个属性可以直接使用,但是在Firefox中却使用了W3C的模型,它是通过传参的方法来传播事件的,也就是说你需要为你的函数提供一个事件响应的接口,在上述函数中,
eventTag扮演的就是这个角色。
varevent=eventTag||window.event;
这段代码可以根据浏览器的不同来得到正确的event,并在程序中使用,如果在IE4+下面使用这段代码,因为eventTag为null可以保证
event=window.event,但是如果在Firefox下运行的话则因为手工的给定了eventTag所以
varevent=eventTag。根据对这一段代码的分析我们也不难看出可以对doEventThing方法进行如下的改造(因为
javascript允许我们在定义function的时候不明确指出参数的数量):
functiondoEventThing(){
varevent=arguments[0]||window.event;
//othercode
}
在Firefox下arguments[0]在特定的场合(没有显式的指定function参数数量的时候)被做为传播事件的参数来使用…………
至于varcurrentKey=event.charCode||event.keyCode;也是不同的浏览器所致,在IE4+下面记录键盘的是keyCode,但是在Firefox下的却是charCode,为此我们需要处理他们的差异。
还有一个差异就是事件源的获取:通过语句
vareventSource=window.event.srcElement||eventTag.target;
我们也看到了IE与W3C的不同。
经过上面的包装,我们基本上可以在IE4+和Firefox下面顺利的使用事件机制了,当然如果为了通用性可以对这种差异进封装来形成自己的Event对象在程序中误差别的使用事件对象,这里就不在介绍了。
接下来分析事件的绑定:大概分为如下5种
1、绑定到元素,这也是比较常见的一种比如:
<inputtype="button"onclick="doEventThing(event)">
,这样我们就把doEventThing绑定到了该button对象上,点击此按钮事件就被触发。
2、绑定事件到对象:这也是比较常见的一种,特别是在IE4+下面:
document.getElementById("divid").onclick=doEventThing;
3、使用<scriptfor>进行事件的绑定,这只在IE4+下有用(为buttong1绑定事件,逻辑在script块中书写event来指定怎么触发事件):
<scriptevent="onclick"for="button1">
//scriptstatementshere
</script>
4、使用IE5/Windows的attachEvent()方法
5、使用W3CDOM的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){//W3CDOM
this.observers.push([element,name,observer,useCapture]);
element.addEventListener(name,observer,useCapture);
}elseif(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(事件)的对象获得,直接下载引用即可
### event兼容调用详解——IE,Firefox,Chrome 在跨浏览器开发中,处理事件(event)的兼容性问题是一项常见的挑战。不同的浏览器对事件模型的支持程度不同,这导致了开发者在编写JavaScript代码时需要考虑多种...
### JavaScript在Internet Explorer (IE) 和 Firefox 中的区别与解决方案 #### 一、获取HTML元素的方式差异 1. **通过ID获取元素**: - **IE**:支持`document.getElementById`和`document.all`两种方式。 - ...
这表明文章旨在探讨并提供解决方案来处理在不同浏览器环境下的JavaScript兼容性问题,尤其是在Internet Explorer(IE)和Mozilla Firefox(火狐)这两个浏览器上。下面将深入解析文件中的部分代码示例,以及给出的一...
另外,`event.layerX`属性在IE和Firefox中都有,但在具体的意义上可能存在差异,需要进一步测试确认。 #### 4. HTML对象的ID作为对象名的问题 在IE中,可以直接通过HTML对象的ID作为`document`的下属对象变量名来...
window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。Firefox必须从源处加入event作参数传递。IE忽略该参数,用window.event来读取该event。解决方法是if(typeof...
### Javascript的IE与Firefox(火狐)兼容性解决方案 在Web开发过程中,浏览器兼容性问题一直是开发者们关注的重点之一。由于不同的浏览器对于Web标准的支持程度存在差异,这导致了同样的代码在不同浏览器中的表现...
- IE的事件对象`event`有`x`和`y`属性,表示鼠标位置,而Firefox使用`event.pageX`和`event.pageY`。为了兼容,可以使用`event.clientX`和`event.clientY`,这两个属性在IE和Firefox中都可用。如果需要精确的坐标,...
在事件处理中,IE 和 Firefox 对 `window.event` 的支持不同。 **说明:** - **IE环境下**,可以使用 `window.event`。 - **Firefox环境下**,不支持 `window.event`,必须在事件处理函数中传递事件对象。 **解决...
- 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代码--添加文件上传例子"这个主题聚焦于解决浏览器之间的差异,尤其是针对老版本的Internet Explorer(IE)和Firefox。在这些早期浏览器中,事件处理的实现方式有所不同,导致...
在获取鼠标当前位置方面,IE浏览器使用`event.x`和`event.y`,而Firefox则使用`event.pageX`和`event.pageY`。为了确保兼容性,开发者通常会使用`event.clientX`和`event.clientY`,这两个属性在IE和Firefox中都可用...
在互联网的早期,IE(Internet Explorer)和Firefox(火狐浏览器)是两个主要的Web浏览平台,它们在处理CSS(层叠样式表)和JavaScript方面存在显著的差异。这些差异对于开发者来说至关重要,因为它们影响了网站在...
- 在Firefox中,可以使用`event.pageX`和`event.pageY`代替,但在IE中需要使用`event.clientX`和`event.clientY`。为了在两种浏览器间保持一致,可以计算`mX = event.x ? event.x : event.pageX`,之后使用`mX`。 ...
IE浏览器通过`event.x`和`event.y`获取鼠标点击的相对位置(相对于窗口),而Firefox则使用`event.pageX`和`event.pageY`(相对于文档)。为了兼容,需要自定义逻辑来计算绝对位置: ```javascript function do...
在Firefox和IE中,获取父元素的方法也有所不同: - **Firefox**: 使用`element.parentNode`。 - **IE**: 使用`element.parentElement`。 为了兼容这两种情况,可以使用以下代码: ```javascript var ...
然而,由于不同的浏览器对JavaScript的支持程度和实现方式存在差异,尤其是Internet Explorer(IE)和Firefox这两款流行浏览器,开发者经常需要面对兼容性问题。以下是一些常见的JavaScript在IE和Firefox上的兼容性...
本文将深入探讨如何创建一个兼容Internet Explorer(IE)和Firefox浏览器的事件模型,特别是在实现拖动功能时所面临的挑战和解决方案。 首先,我们需要理解IE和Firefox在事件处理上的差异。在IE中,事件处理主要...
IE使用`event.x`和`event.y`,而Firefox使用`event.pageX`和`event.pageY`。为了兼容这两种浏览器,可以采用以下代码: ```javascript mX = event.x ? event.x : event.pageX; ``` ### 10. 事件源元素的获取 在...