IE和Firefox下event事件杂谈


Posted in Javascript onDecember 18, 2009

因为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的事件处理机制起作用。
Javascript 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
替代window.event.srcElement效果的可兼容性的函数
Dec 18 #Javascript
JavaScript 序列化对象实现代码
Dec 18 #Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 #Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 #Javascript
javascript 导出数据到Excel(处理table中的元素)
Dec 18 #Javascript
event.srcElement 用法笔记e.target
Dec 18 #Javascript
Javascript document.referrer判断访客来源网址
May 15 #Javascript
You might like
php模块memcache和memcached区别分析
2011/06/14 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python3访问sina首页中文的处理方法
2014/02/24 Python
python实现各进制转换的总结大全
2017/06/18 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
pandas 对group进行聚合的例子
2019/12/27 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
《海伦?凯勒》教学反思
2014/04/17 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
热情服务标语
2014/10/07 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
超级礼物观后感
2015/06/15 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
Python中的 Set 与 dict
2022/03/13 Python