Javascript 之 事件冒泡，Event Bubbling

翻译。原文出处:http://www.webreference.com/js/column10/eventbubbling.html

今天忽然感觉对IE的事件模型都点儿模糊，赶紧找了片文章，巩固一下。

IE4x,介绍一种新的处理事件的方法----事件冒泡。对Html和Javascript来说这是全新的，但是在许多其他的环境中他早已经被应用，如:windows,os/2,HyperCard等。

起始的时候，IE4x直接将一个事件引向的他的指定目标，例如:如果一个按钮被单击，那么这个按钮就是他的目标.如果已经为这个对象定义好了事件处理程序，那么这个事件就会调用事件处理程序，如果没有定义任何处理程序，或者事件处理程序的返回值为'true'(为'false'将会取消事件),那么这个事件会向这个对象的父级对象传播，进行处理，这个事件会一直在整个对象层次中冒泡，直到他被处理，或者他到达对象层次的最顶层，document对象。

为了弄清这个机制，你必须要对IE4x中的DOM模型有一些基本的了解。所有的文档内容，包括元素和属性，都是可访问，可操纵的。换句话说，在IE4x中，每个元素都被组织成一个对象，包含的对象层次中.因此在页面上的每个元素，都可能是事件源。

就想W3C工作草案中描述的那样。

1.所有的元素都能够产生事件。

2.将有交互事件，更新事件和，更改事件。

3.事件模型将会对用户的交互做出反应.

4.事件传输机制将允许默认行为的重写。

5.事件将会在文档的对象结构中冒泡。

6.事件是同步的.

7.事件将会用一个中立的方式被定义.

8.将提供事件绑定的接口.

事件冒泡是很有用的，因为他允许多个操作被集中处理.他可以让你在对象层的不同级别捕获事件.

下面来看个例子:

<P onClick="functionName()">

This is a paragraph, and <B>these are bold words in the paragraph</B>.

</P>

自从页面上的每个单独的元素被描绘成一个对象以后，你可以为<p>标记提供一个onclick事件处理程序.例如当你单击单词:'words'的时候，click事件会直接指向P元素进行处理,如果P元素有合适的事件处理程序,将会处理这个事件，事件将会停止他的传递过程.当你单击单词'these'的时候，这个事件首先被发送到元素B,因为B也被表现为一个对象，因为他没有click事件的处理程序，所以这个事件被冒泡给他的父元素,这个段落处理了该事件.如果IE4x不支持事件的冒泡，以上所说的情况也不可能发生。