IE和Firefox下event事件杂谈
作者:bea
因为javascript的事件模型有三种,它们分别是NN4、IE4+和W3C/Safari;这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。首先看如下代码: 代码如下: function doEventThing(eventTag){ var event = eventTag||window.event; var currentKey = event.charCode||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的事件处理机制起作用。
有用 | 无用
首先看如下代码:
代码如下:
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的事件处理机制起作用。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JavaScript 图片预览效果 推荐
- javascript 年月日联动实现核心代码
- 兼容firefox的文本框只能输入两位小数的数字的代码
- js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE
- Javascript和Ajax中文乱码吐血版解决方案
- 利用jQuery的$.event.fix函数统一浏览器event事件处理
- jQuery 连续列表实现代码
- jQuery解决iframe高度自适应代码
- IE 上下滚动展示模仿Marquee机制
- Js获取table当前tr行的值的代码
- javascript 翻页测试页(动态创建标签并自动翻页)
- js控制div及网页相关属性的代码
- jQuery 淡入淡出、展开收缩菜单实现代码
- JQuery Tips(4) 一些关于提高JQuery性能的Tips
- JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)
- JS 的应用开发初探(mootools)
- 用js实现层随着内容大小动态渐变改变 推荐
- javascript demo 基本技巧
- javascript option onclick事件ie解决方案 兼容ie,firefox