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()的一种简写方式。