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 指南/入门基础
Nov 30 Javascript
JavaScript 语言的递归编程
May 18 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
vue+ts下对axios的封装实现
2020/02/18 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
js实现车辆管理系统
2020/08/26 Javascript
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
2015年试用期工作总结范文
2015/05/28 职场文书
演讲开场白和结束语
2015/05/29 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
Java获取字符串编码格式实现思路
2022/09/23 Java/Android