关于DOM事件模型的两件事
作者:march 来源:三月的蚁穴 发布时间:2007-11-21 19:32:00
一、事件捕捉(Event Capture)的实现问题
首先在说这件事前,先感谢一下Realazy。
W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling)。下面这个图能大概的说明整个过程:
(from W3C)
如果想创建一个捕捉事件,在支持W3C 事件模型的浏览器中,将addEventListener的第三个参数设为true就好了。例如:
document.getElementById('foo').addEventListener('click',function(){alert('Hello, world!');},true);
前一阵因为想弄懂事件捕捉,所以做了点小实验,分别在Firefox 2、Safari 3 on Windows和Opera 9上实践了事件捕捉(当然,因为IE不支持事件捕捉,所以…),实验的原理见下图:
ID为div1和div2的两个元素都被委派了捕捉阶段的事件处理函数,这样:
当点击#div1(蓝色区域)时,应该会alert出”div1″
当点击#div2(黄色区域)时,应该会先alert出”div1″,再alert出”div2″,因为在事件捕捉阶段,事件是从根元素向下传播的,#div1是#div2的父元素,自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。
然而,以上的设想只试用于Firefox 2和Safari 3 on Windows,在Opera 9中,事情会变成这样:
当点击#div1(蓝色区域)时,什么都不会发生
当点击#div2(黄色区域)时,会alert出”div1″,随后什么都不会再发生
可以看出,在Opera 9中,目标元素(TargetElement)的click事件没有被执行。通过Realazy(orz…)的指点,找到了这篇文章:《Event capture explained》,发现,
来Opera中的实现才是正确的。此文中有一段话如是说:
The DOM spec states that capturing events should not fire on target, because the idea of a capturing event is to detect events before they reach their targets. Because of bugs in Gecko and Safari, web content that is tested mostly with Firefox or other Gecko-based browsers sometimes expects capturing listeners to fire on target. Such content will fail in Opera 7, 8 and current releases of 9 because of its correct implementation of the standard.
大意是说:DOM规范中陈述了捕捉型的事件不应该在目标元素上被执行,因为捕捉型事件的用意就是为了监测到达目标元素之前的事件。Firefox和Safari的实现都是带有bug的。
再来看看W3C的DOM Events规范中的原话:
A capturing EventListener will not be triggered by events dispatched directly to the EventTarget upon which it is registered.
所以,在整个事件传播中,被执行的顺序是:
父元素中所有的捕捉型事件(如果有)自上而下地执行
目标元素的冒泡型事件(如果有)
父元素中所有的冒泡型事件(如果有)自下而上地执行
在了解了这些后,也许还是不要使用事件捕捉为妙,至少暂时不要。
猜你喜欢
- Oracle数据库作为大型数据库管理系统,近年来一直占有世界上高端数据库的最大份额,其强大而完善的数据库管理功能,以及ORACLE公司推陈出
- px比em更加容易使用,em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px,所以10px=0.
- CacheControl 属性设置是否可缓存由 ASP 生成的输出。默认地,代理服务器不会保持缓存副本。语法:response.CacheC
- ①.页面文件使用正确的编码,gb2312使用ANSI,utf-8使用utf-8; ②.ASP代码中设置正确的CODEPAGE,gb2312使
- 你家中的CD、VCD一定很多吧?是不是常遇到为找一张CD把一抽屉的碟子翻得乱七八糟的情况,你一定没少受埋怨——你不想整理它们一下?如:影片是
- 阅读上一篇:WEB前端开发经验总结 ⅠWEB标准篇现在我们接着来讲怎么在实际开发中结合我前面所讲的理论来开发制作页面吧。现在就来看看我们要制
- 其实想实现这种功能很简单,首先要上传一个RAR的解压程序,就是RAR自己的解压程序,只需要它的核心程序RAR.EXE这个文件就可以了。然后就
- 因为比较简单,我就不说什么了。一看就明白的!1.sql防注入函数Function ChkStr(InString) &
- 昨天我问过这个问题怎么用ADODB.Stream来读取或写入文件,而不是用fso,不过没人回答到点上,今天搞定了.贴出来给觉得有用的朋友,希
- 浏览器的具体功能都储存在服务器端的Browscap.ini中:<% SET
- 以前见过一个很漂亮的网页提示信息,就是把鼠标放到网页的文字或者图片上面就会有提示的那种透明的,还带个箭头,很漂亮,不知道谁在哪见过没有,感谢
- 本文介绍了四种asp导出excel数据的方法:1.使用OWC ,2.用Excel的Application组件,3.直接在IE中打开,4.导出
- 内容适应形式学习了死猫的文章,我今天也来说说有关内容和容器的关系。看标题你也许觉得有些囧,它和上一篇《形式追随内容?》看起来相反,而且好像从
- 在网页设计发展到一定阶段的时候就必然会和其他学科或领域只是产生交汇和共鸣,在阅读《超越CSS:web设计艺术精髓》这本书的时候,发现原来we
- 很实用的过滤重复数据的asp代码,函数如下:<%'**************************************
- 这篇论坛文章(赛迪网技术社区)主要介绍了配置一个高可用性的MySQL服务器负载均衡群集的具体过程,详细内容请参考下文:本文将告诉你如何配置一
- python使用utf8编码,mysql也是utf8编码,是什么问题?后来查了一下,使用一个简单的办法即可:vsql = "ins
- 问题:有一个列表,每一个条目都是这篇文章的部分内容,类似这样:<div class="list">
- 是否看见大站的广告都是放在内容中间实现文字环绕的呢,一般普通小站广告只能放在内容开头或者结尾,也许大站的cms系统带这个功能吧,我们小站常用
- 如何提高Request集合的使用效率?以加快程序处理速度: strTitle=Request.Form("Title&q