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 相关文章推荐
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
js下用层来实现select的title提示属性
Feb 23 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
js清空form表单中的内容示例
May 20 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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开发文件系统实例讲解
2006/10/09 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
ext 代码生成器
2009/08/07 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
offsetParent 算法分析
2010/04/05 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
在Python中使用next()方法操作文件的教程
2015/05/24 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
仓库保管员岗位职责
2013/12/20 职场文书
文明村镇申报材料
2014/05/06 职场文书
化妆品活动策划方案
2014/05/23 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
学术会议通知
2015/04/15 职场文书
第一书记观后感
2015/06/08 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python