DOM元素的事件捕获和冒泡

原帖地址： 

事件： 

当HTML页面上发生一个事件时，每个层次上的DOM元素都有机会处理这个事件。 
以下面的HTML代码为例： 
<div class='foo'> 
<span> 
<a href='http://www.baidu.com'>百度</a> 
</span> 
<p>How are you!</p> 
</div> 
该页面在浏览器上呈现的效果如下图(HTML页面呈现的效果)： 

如果单击了页面中的a(锚)元素，那么<div>,<span>和<a>元素全都应该得到响应这次单击的机会。因为这 
3个元素同时都处于用户鼠标的指针之下。 

允许多个元素响应单击事件的一种策略叫做事件捕获。在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。 
在这个例子中，意味着单击事件首先会传递给<div>,然后是<span>，最后是<a>.如图：事件捕获。 

另外一种相反的策略叫做事件冒泡。即当事件发生时，会首先送给最具体的元素，在这个元素获得相应机会之后， 
事件会向上冒泡到更一般的元素。在这个例子中，<a>会首先处理事件，然后按照顺序依次是<span>和<div>. 
如图：事件冒泡。 

DOM标准规定应该同时使用这两个策略：首先，事件要从一般到具体进行捕获，然后，事件再通过冒泡返回DOM 
树的顶层。 

注： 
事件捕获和事件冒泡是"浏览器大战"时期分别由Netscape和微软提出的两种相反的事件传播模型。 

停止事件传播： 
事件对象提供了一个stopPropagation()的方法，该方法可以完全阻止事件的冒泡。 


当用户单击<a>锚元素连接时，浏览器会加载一个新页面，它是单击锚元素的默认操作。类似地，当用户 
在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。 
如果我们不希望执行这种默认操作，那么在事件对象上调用preventDefault()方法，则可以在触发默认 
操作之前终止事件。 

如果想同时停止事件传播和默认操作，可以在事件处理程序中返回false，这是对在事件对象上同时调用 
stopPropagation()和preventDefault()的一种简写方式。