由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD.
Bubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.cancelBubble，则就不能上传事件。
举个简单的例子：
比如你没有用CSS，但是想同意改变你的页面上的所有按钮的属性，你可以在页面load完毕后使用在body中使用onmouseover方法统一改变鼠标在按钮上和离开后的style，而不用对每个按钮都写一边。
更加精准的描述
a lot of events are passed
upward through the DOM object structure, but you can
use event.cancelBubble=true to stop this "bubbling". For
example, if you click on the following button, the
alert message boxes in both the button's onclick event
handler and the document's onclick event handler will
be displayed. But if you uncomment the cancelBubble
line, you will only see the alert box in the
button's event handler get displayed:
程序如下：
<body onmouseover=mouse_over() onmouseout=mouse_out()>
<script language="javascript">
function document.onclick()
{
alert("in the document's event handler!");
}
function clickMe()
{
alert("in the button's event handler!");
//event.cancelBubble = true;
}
</script>
<input type="button" value="click me" >
< span>
例:
<html>
<head>
<meta http-equiv="Content-Type" c>
<meta name="Keywords" c>
<title>event.cancelBubble－</title><body>
<span onclick=alert("你好")>点我 <span>再点我</span></span><br><br>
<span onclick=alert("你好")>点我 <span onclick=event.cancelBubble=true;>再点我</span></span>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" ></div>
</body>
</html>
加好友 
发短信
天之飞雪
Post By：2010/10/14 11:33:40 [只看该作者]
