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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
一个JS翻页效果
Jul 23 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
如何HttpServletRequest文件对象并储存
Aug 14 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对数组排序的简单实例
2013/12/25 PHP
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
python根据京东商品url获取产品价格
2015/08/09 Python
win与linux系统中python requests 安装
2016/12/04 Python
基于python时间处理方法(详解)
2017/08/14 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
Django视图、传参和forms验证操作
2020/07/15 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
美国时尚在线:Showpo
2017/09/08 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
个人简历中的自我评价范例
2013/10/29 职场文书
护士演讲稿范文
2014/01/05 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
Go 语言结构实例分析
2021/07/04 Golang
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python