事件捕获与事件冒泡

1.事件流

在理解这两个概念之前可以先来理解一个概念叫:事件流,指的是触发事件的先后顺序。可以把事件冒泡和事件捕获想成对于事件流的一种实现方式。

很久之前IE和网景公司对于事件实现的时候产生一个方面的共识,那就是当我们点击一个网页的时候,点击页面内任何一个元素,那么点击的不只是那一个元素,而是整个页面。相当于一个同心圆,我们手指指向中心的时候,其实指向的不只是中心圆,而是所有的圆。如下图。但是在关于如何实现事件流的时候,两个公司却给出了截然相反的理念。

 

2.事件冒泡

这个由微软提出并使用在IE浏览器中,事件冒泡的基本理念是从特定目标到不特定目标的顺序进行触发。那么触发的顺序就如同下图:

 

 

 

如有下例一个页面:

1 
2 
3     
4 
5         
6 
7     
8 
9     

当我们点击页面内的input元素的时候,如果只看这个结构里面的内容,那么触发的顺序为:input >> body >> html

 

3.事件捕获

这个由网景公司提出,事件捕获的基本理念是从不特定目标到特定目标的顺序进行触发。那么触发的顺序如下图:

 

 

如有下例一个页面:

1 <html>
2 
3     <body>
4 
5         <input type=“submit” />
6 
7     </body>
8 
9 </html>    

 

当我们点击页面内的input元素的时候,如果只看这个结构里面的内容,那么触发的顺序为:html >> body >> input

 

 

4.DOM2级事件

W3C在很久之前就着手规划事件,把事件分为两个部分,第一个部分为事件捕获阶段,第二个部分为事件冒泡阶段。相当于每个事件经历了两个步骤,一个为事件捕获,一个为事件冒泡,就如下图一样:

 

 

关于兼容问题,从IE9开始的浏览器以及现在的Safari、firefox、chrome、opera浏览器都支持DOM2级事件,但是如果要兼容IE9以下的浏览器,那就需要使用时间冒泡类型来兼容IE9以后的浏览器了。

文档信息

发表评论

电子邮件地址不会被公开。 必填项已用*标注