有一个好网站，可以演示冒泡的意思：
http://javascript.info/tutorial/bubbling-and-capturing
Event bubbling and capturing are two ways of event propagation in HTML DOM.
In bubbling the event is first captured and handled by the inner most element and then propagated to outer elements.
In capturing the event is first captured by the outer most element and propagated to the inner most element.
During the time of Netscape browser they were advocates of event capturing and Microsoft was from event bubbling school.
Both are part of the w3 standard. As per the standard first the event will capture it till it reaches the target then it will bubble up to the outer most element.
IE uses only event bubbling where as firefox supports both bubbling and capturing.
We can use the addEventListener(type, listener, useCapture) to register event handlers for bubbling and capturing phases. To use the capturing phase event handling pass the third argument as true.
Only event bubbling model is supported by all the major browsers. So if you are going to use event capturing still you need to handle event bubbling for IE. So it will easier to use event bubbling instead of capturing.
<div> <ul> <li></li> </ul> </div>If you take this structure and assume that a click event has happed in the li element.
In capturing model the event will be handled by the div first(click event handlers in the div will fire first) then in the ul then at the last in the target element li.
In bubbling model it is the opposite. In this model the event will be first handled by the li first and the ul and at the last by the div element.
You can find more informations from the below sites.
Event Order
addEventListener
Events Advanced
