浅谈Javascript中的事件流和事件绑定
作者:姚海啸 来源:Yaohaixiao博客 发布时间:2009-07-20 17:13:00
事件流
浏览器中的事件流意味着页面上可有不仅一个,甚至多个元素响应同一个事件。而这一个或多个元素响应事件发生的先后顺序在各个浏览器(主要针对IE和Netscape)上是不同的。
冒泡型事件(Dubbed Bubbling)
IE上的解决方案就是冒泡型事件(Dubbed Bubbling)。冒泡型事件的基本思想是,事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
示例(1)的XHTML代码结构:
<span id="cnt0">
<a href=”#1″ id=”link0″>点击我触发冒泡型事件流</a>
</span>
这个示例里我同时给span和a标签绑定了click事件,大家看到了,我们点击这个a标签,一次点击(click)同时触发了两个元素a和span的事件。先触发的是绑定给a标签的click事件,然后触发的是span标签的click事件。也就是前面提到的“页面上可有不仅一个,甚至多个元素响应同一个事件”和“事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发”。
这个示例里我们点击的第一目标是a标签这个链接,它就是前面提到的“最特定的事件目标”,然后才是span这个相对“不特定的事件目标”。再看看我的XHTML代码结构,你会发现a标签包含在span标签中,也就是说span是a标签的父节点,如果大家还不是很清晰的知道他们之间的关系,让我们看看下面的这个DOM树的结构图:
事件触发的顺序是从最特定的目标,沿着DOM树不断的向上触发click事件,就像气泡从下一直上冒的过程一样。“冒泡型”也就是这么得来的,也很形象。这里要说明的是,由于我只给a和span绑定了click事件,所以“冒”到span就到顶了,如果你也给包含他们的p标签还有document绑定click事件,这个冒泡的过程就会一直延续到document的事件触发才结束。
另外要说明的是,在IE5.5中冒泡的最高层DOM节点为document,IE6中则可以支持html节点。在Mozllia1.0及之后的版本也支持冒泡,而它则更可以冒到window窗口对象。
捕获型事件(Event Capturing)
相对IE4.0,Netscape4.0则使用的是捕获型事件的解决方案。这个事件触发的过程则正好和冒泡相反——在捕获型事件中,事件从最不精确的对象(document对象)开始触发,然后到最精确的对象。还是前面的示例,不过现在换由捕获型事件触发(当然你需要在Netscape或Firefox中测试)。
示例(2)的XHTML代码结构:
<span id="cnt1">
<a href=”#1″ id=”link1″>点击我触发捕获型事件流</a>
</span>
事件触发的循序正好跟前面的冒泡相反,这里我就不赘述了。
DOM 事件流
这个事件流则是W3C制定一个标准规范,它同时支持两种事件流模式,不过是先发生捕获型事件流,再发生冒泡型事件流。
DOM事件流最独特的是,它支持文本节点也触发事件(IE中这不支持)。不过说实话,我现在还看不出来让文本节点支持事件有什么作用。
最后要说的是,根据最近大家在开发的实践过程中的运用,我们一般都采取冒泡型的事件流触发方式,这点我们的IE做的比较成功。至于原因,我想你可以通过上面的解释可以看出,毕竟我们给元素触发事件,肯定是希望从我们最希望先触发(从最精确的)的那个开始。而DOM的先捕获后冒泡我觉得只能用让我很疑惑来形容我的感受。因为如果按照DOM的事件流,我们的事件要被触发2次,而我们一般都只会选择一个类型的事件流,值希望触发一次,很难理解当初W3C是怎么想的?!一个字——晕!可能我的理解能力有限,不过这是我的真是感受。
事件处理函数/监听函数
这里我不想做过多的介绍,我们知道在IE里使用attachEvent(”NAME_OF_EVENT_HANDLER”, fnHandler)给元素绑定事件,而在支持DOM事件流的浏览器里,则使用addEventListener(”NAME_OF_EVENT_HANDLER”, fnHandler, isCapture)。前面我控制FIREFOX中触发捕获事件流,就是通过设置isCapture(ture:捕获;false:冒泡)做到的。还有就是我们传统element.onclick或者element['on'+eventName],这个是所有浏览器都支持的事件绑定的 * ,而且我测试的结果XP下的IE6~8、Firefox2.0~3.5、Safari4.0、Opera9.6.4、Chrome2.0.180都是以冒泡的事件流触发的。更老的浏览器我就没有测试过了,不过根据《Pro Javascript Techniques》里介绍,老的浏览器使用onclick这样的事件绑定,触发的也是冒泡事件流。如果你有兴趣可以淘下那些古董浏览器,测试一番。不过还是有不支持冒泡的事件的,下面我们就讲讲。
猜你喜欢
- 环境:A机器和B机器都是LINUX系统,但由于B机器已经空间不足,所以停掉不停操作数据库的服务后 ,准备在A机器进行导出操作。导出语句 ex
- 在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。首先,我们对CSS作一个简单的说明:CSS是层叠样式表(Cascadi
- 自从web2.0之后,网页设计开始走向实用设计的阶段,越来越多的设计师注意到“为表达信息而设计”。着迷于前段时间黑白灰老师给大家介绍的“in
- 从BbsXp提出来的生肖函数Zodiac(birthday)。使用方法:birthday为把要判断的出生时间,如2008-3-24 20:0
- Css Reset是什么? 有些同行叫 "css复位",有些可能叫 "默认css".....相信看完
- 书 名:细节决定交互设计的成败国际书号:ISBN 978-7-121-08232-0作 &nb
- 印象中最早看老外个人网站就挺纳闷,怎么人家都没有www,这样也可以?经过不断尝试,我发现确实不录入www要快捷的多,但不清楚怎么能做到。几年
- 在广大网友心目中,他们就是中国互联网搜索领域的三驾马车。无论这三家搜索巨头承不承认,在网友眼中总会来将他们进行对比比较。当然,更多时候的比较
- create or replace PROCEDURE proceudre_name AS BEGIN DECLARE sPara VARC
- 在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现。你当然可以用类选择符class和标识选择符id来定义自己的选择符。
- 此代码适合你做网站用,普通朋友可以不用理这个东西!ASP:<%dim objXMLHTTP, qq, pwd qq = &
- <!-- #include file="conn.asp" -->
- Object 类型的对象虽然有 toString 方法,但结果却是 [Object Object] 让人没法理解的字符。比如简单的对象:{n
- 随着信息技术的飞速发展,数据处理不仅在数量上要求越来越大,而且在质量上也要求越来越高。操作系统的稳定对数据库来说是十分紧要的,在数据库可操作
- 最近,在项目开发过程中,碰到了数据库死锁问题,在解决问题的过程中,笔者对MySQL InnoDB引擎锁机制的理解逐步加深。案例如下:在使用S
- 以下示例显示如何在 XPath 查询中指定轴。这些示例中的 XPath 查询都在 SampleSchema1.xml 中所包含的映射架构上指
- 一、备份数据库1、打开SQL企业管理器,在控制台根目录中依次点开Microsoft SQL Server2、SQL Server组-->
- 1.由于设置了slave的配置信息,mysql在数据库data目录下生成master.info,所以如有要修改相关slave的配置要先删除该
- 前几天,看到有人写了个superLink的东东,主要的做什么用呢?我们有时会给在大块元素加个window.location='htt
- 刚开始时,这个表的字段很少(10个以内),前开发者把这个表的所有存储过程与触发器以及表函数全是写死了。用户每添加一些字段,都需要手动去更改这