JS视频:事件第三讲:事件的传播、冒泡、捕获等

作者:日期:2011-06-21 22:59:12 点击:397


关于冒泡、捕获这些知识很多同学搞不清楚,查阅相关资料也表达不清,在这一讲里,对于这个问题会有一个清楚详细的讲解。
一般的错误理解为:火狐是支持捕获不支持冒泡,IE支持冒泡不支持捕获。其实捕获和冒泡,是事件传播的三个阶段中的两个,标准的浏览器中这三个阶段都支持(IE不标准,它不支持捕获)。事件传播的三个阶段是:捕获、冒泡和目标阶段

什么是事件冒泡?如何阻止事件冒泡?阻止事件冒泡函数。

 

先来看看事件冒泡一个概念:

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

1,事件捕获其实有三个阶段,事件冒泡只是其中之一:

(1)IE从里到外(inside→outside)的冒泡型事件。

(2)火狐等标准浏览器(DOM事件流)是在document到body这几层里,从外到里(outside→inside)的捕获型事件的传播;body以内的,是冒泡型传播
就是先从外到里,再从里到外回到原点(outside→inside→outside)的事件捕获方法
(3)事件的触发,经测试发现,先是在目标阶段触发,然后是冒泡,再是捕获(先是目标元素,再往上传播到body,再是document->html-body)

2,不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload。

3,事件捕获方式在不同浏览器,甚至同种浏览器的不同版本中是有所区别的。如Netscape4.0采用捕获型事件解决方案,其它多数浏览器则支持冒泡型事件解决方案,另外DOM事件流还支持文本节点事件冒泡。

4,事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在IE6中HTML是接收事件冒泡的,另外大部分浏览器将冒泡延续到window对象,即……body→documen→window。

 

5,阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据,这种行为无须我们写程序定制。

上一篇: JS视频:事件第二讲:DOM 0级事件处理的方式

下一篇: JS视频:事件第四讲:事件传播应用的实例--网页菜单切换效果