- 浏览: 213076 次
- 性别:
- 来自: 深圳
最新评论
-
lqixv:
abombhz 写道项目代码连接打不开,有的话发一份到我邮箱a ...
GWT 2 Spring 3 JPA 2 Hibernate 3.5 教程(译) -
abombhz:
项目代码连接打不开,有的话发一份到我邮箱abomb_hz@16 ...
GWT 2 Spring 3 JPA 2 Hibernate 3.5 教程(译) -
xiaokang1582830:
它直接抛出异常,无法定位是账号密码错误还是参数设置不正确... ...
javax.mail.AuthenticationFailedException: EOF on socket -
lqixv:
不再建议使用这个 tree。用 ztree 吧,ztree 是 ...
在xyTree中添加一个方法,用于获得所有已选择或部分被选择的node -
du_shu_lake:
贴主,请教一个xytree的问题,如果我从服务器向前台传数据, ...
在xyTree中添加一个方法,用于获得所有已选择或部分被选择的node
如果在使用javascript的时候涉及到event处理,就需要知道event在不同的浏览器中的差异,因为javascript的事件模型有三种,它们分别是NN4、IE4+和W3C/Safari;这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。
一个事件其实在页面上 有多个元素相应事件处理,点击页面上的一个button,会发生什么?其实 是相当于先后点击了按钮,它的容器,及这个页面.也就是说没一个元素都按照特定的顺序响应那个事件.事件的发生顺序在IE和mozilla在事件支持上的主要差别.
事件流
冒泡技术.冒泡型事件的基本思想,事件按照从特定的事件目标开始到最不确定的事件目标.例如:
<html>
<head>
test
<head>
<body onclick="handle()">
<div onclick="handle1()">click</div>
</body>
</html>
IE5.5顺序是div --body--document.
在IE6中div-body--html--document.
mozilla的顺序是div--body--html--html--document--window.
还有另外一种技术:捕获型事件,它的执行顺序正好和冒泡技术相反,从document开始到div结束.
DOM事件流
同时支持2种事件,但是捕获型事件先发生.2种事件流会触及DOM中的所有对象,从document开始,也在document结束.DOM事件流最独特的性质是,文本节点也会触发事件(在IE不会),所以如果点击click, dom事件是这样的:
首先window--document--body--div--click.
然后click--div--body--document--window.
所以一个事件处理函数在DOM浏览器中会执行2次.
给事件指定处理函数 的做法比较简单
var obj = document.getElementById("id");
obj.onclick=function(){}
或者直接在html标签里加onclick="function-name"
这两种方式是在目前所有流行的浏览器种都可以使用.但是如何为每个事件分配多个处理函数呢?
IE的做法:
在IE 中,每个元素和window对象都有2个方法:attachEvent()和detachEvent(); attachEvent用来给一个事件附加事件处理函数. 而detachEvent用来将事件处理函数分离.每个方法都有2个参数:要分配的事件处理函数的名字(例如:onclick)和一个函数引用.
例如:
var fnClick=function(){alert("ss")}
var fnClick1=function(){alert("sss")}
var obj=document.getElementById("id")
obj.attachEvent("onclick",fnClick);
obj.attachEvent("onclick",fnClick1);
obj.detachEvent("onclick",fnClick);
事件的执行顺序是按照添加的顺序执行的.
DOM方法
dom中对应的方法是addEventListener()和removeEventListener ,这两个方法有3个参数,事件名称,要分配的函数和处理函数是用于冒泡阶段还是捕获阶段.如果事件处理函数是用在捕获阶段,第三个参数为true,冒泡阶段为false.用法和IE中的用法一样,不再多说了,就举一个例子吧:
var fnClick=function(){alert("ss")}
var fnClick1=function(){alert("sss")}
var obj=document.getElementById("id")
obj.addEventListener("click",fnClick,false);
obj.addEventListener("click",fnClick1,false);
obj.removeEventListener("click",fnClick,false);
注意这里的是事件名称"click",不是要分配的事件处理函数的名字"onclick",自己体会一下吧.
如何获取事件对象:
获取事件信息是很重要的事情,事件对象只在事件发生时被创建,而且只有在事件处理函数中可以访问,当所有的事件处理函数结束后,事件对象被销毁.
IE和DOM在获取事件对象上也是有差别的.
IE中,事件对象时window的一个属性event,也就是说必须在事件处理函数中这样访问:
obj.onclick=function(){obj 1= window.event;}
尽管它是window的属性,event对象也是只能在事件发生时访问.
DOM的准则说明,event对象必须座位唯一的参数传递给事件处理函数,所以在DOM浏览器中访问对象有两种方法:
1.obj.onclick=function(){obj1=arguments[0]}
2.obj.onclick=function(envent){}
事件的属性:介绍几个比较常用的
IE:
altKey boolean true 按下alt健
button integer 0=未按键,
1=按下左键,
2=右健,
3=同时按左右,
4=按下中键,
5=左键+中键,
6=右键+中键,
7=三个健子一起按下
cancelBuble boolean 设置成true 会停止事件向上冒泡.
fromElement element 鼠标事件中,鼠标所离开的元素.
srcElement 引起事件的元素
toElement 鼠标事件中,鼠标所进入的元素
type string 事件的名称.
DOM中:
bubbles boolean 表示事件是否是否在冒泡阶段中
cancelable '' 表示事件能否取消.
charCode 按下健的unicode值,和IE的keyCode不一样
currentTarget 事件目前所指向的元素
detail integer 鼠标点按钮被点击的次数
eventPhase integer 1=捕获阶段,2=在目标上,3=冒泡阶段
isChar Boolean 表示按键是否时字符
preventDefault Function 调用这个方法可以终止事件的默认行为
relatedTaget 事件的第二个目标,经常用户鼠标事件.
stopPropagation 调用这个方法,组织事件将来事件的冒泡.
首先看如下代码:
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的事件处理机制起作用。
撇开this.observers.pust([element,name,observer,useCapture])不谈,我们对4、5所说的事件绑定就很清楚了。我们知道prototype的此方法的useCapture在IE下没有作用,只对W3C的事件处理机制起作用。
转自:http://www.cnblogs.com/zhangtao/articles/1490432.html
发表评论
-
Nginx 0.8.x + PHP 5.2.13(FastCGI)搭建胜过Apache十倍的Web服务器(第6版)(转)
2011-12-13 10:27 1822[文章作者:张宴 本文版本:v6.3 最后修改:2010. ... -
几种即见即所得Web编辑器优缺点比较
2011-07-14 11:34 1504我说说我对我用过(了 ... -
使用jQuery清空IE file 文件域的方法
2011-01-27 12:26 2273要清空 file 文件域,直接使用:$("#file ... -
jquery 中的 “$(table > tr)”
2011-01-10 10:13 1252在 jquery 中,不管一个 表格中是否包含“tbody”这 ... -
web 页面的左侧浮动广告异常问题
2010-08-13 20:14 1519一段在其它页面工作很正常的浮动广告代码,但移到另一个页面后,根 ... -
jsTree 与 jquery.validate.js 冲突的解决
2010-08-04 09:53 2092我使用 jsTree 来建立树,同时也用了 jquery.va ... -
JavaScript中的 JSON
2010-07-07 19:56 812在这里:http://www.dreamdu.com/blog ... -
javascript 去除空格
2010-05-07 11:50 901如题,代码如下: <script> Stri ... -
很漂亮的多级css菜单
2010-03-31 14:49 953很喜欢,记在这里,用于备忘: http://www.lwis ... -
用javascript实现的网页简繁互换
2009-10-14 20:39 1543今天接到一个需求,需要做一个有简、繁两种字体的网站,一查之下, ... -
Ckfinder1.2.3的破解方法
2009-10-13 20:41 1326Cfkfinder 是一款好用的ajax文件管理器, 但是作为 ... -
静态HTML页面不缓存js文件的方法
2009-07-15 17:58 3503今天做项目时候遇到一个问题,由于采用了生成静态的CMS ... -
在xyTree中添加一个方法,用于获得所有已选择或部分被选择的node
2009-05-22 16:24 1856打开DivTree.js,在方法xyTree.DivTree. ... -
在xyTree中添加unicode转gbk功能
2009-05-20 14:03 1700与DTree相比,xyTree的性能好很多,只是麻烦点。 在 ... -
form.submit()提示对象不支持此属性或方法
2009-04-14 09:58 3185当我用form.submit()来进行表单提交时,总是提交不成 ... -
身份证号码的规则及验证原理
2009-02-21 11:38 5841【身份证号码的规则】 1、15位身份证号码组成: dddddd ... -
深入浅出JSON
2008-12-31 14:49 1367Author:Truly JSON定义 JSO ... -
理解HTTP消息头
2008-11-28 10:23 1608(一)初识HTTP消息头 但凡搞WEB开发的人都离不开HTTP ... -
FCKEditor 应用(二) -- 在编辑器外使用fckeditor中的文件上传
2008-11-12 11:34 999使用过 fckeditor 后,觉得其提供的文件上传、特别是浏 ... -
FCKEditor 应用(一) -- 在JSF中的安装与使用
2008-11-12 11:28 1707首先,是安装与配置: 1、从 FCKEditor 网站上下载最 ...
相关推荐
Javascript在IE和FireFox中的兼容处理
javascript和css在IE和Firefox中的不同点
JavaScript在IE和Firefox(火狐)的不兼容问题解决
Javascript在IE和FireFox中的不同表现,总结IE和火狐的差异。
javascript和css在IE和Firefox中的不同点及解决兼容性的方案,一共有二十五点
Javascript的IE和Firefox(火狐)兼容性解决方案
总结javascript在IE和Firefox中兼容性问题
在文本中大量区分网页在IE与 fireFox里面js的区别与不同的表现方式,与达到统一的解决方法
Javascript的IE和Firefox兼容性问题集合
IE和Firefox的鼠标滚轮事件JavaScript代码
css和javascript在IE和Firefox中二十三个不同点
整合了IE和FireFox下的旋转图片的方法。(非原创 忘了作者了 表骂我啊)
总结了一些常用属性在ie和firefox下的兼容问题,并附有相应的解决方法。
IE和firefox 调试 javascript css html 插件 exe文件为IE的,另一个为firefox的 AJAX开发必备
在IE和firefox中调试javascript的教程
javascript的IE和Firefox兼容性汇编 1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行 (2)解决方法: 改用 document.formName....
详细阐述了IE和Firefox中兼容JavaScript的区别,是一份值得学习值得一观文档资料。
特别是javascript的兼容性问题,典型代表就是IE浏览器和FireFox浏览器,了解到不同之处就可以避免出现使用不同浏览器时可能会出现的兼容性问题,找了一些关于js在IE和FireFox中区别的资料,以供参考。
Javascript的IE和Firefox兼容性