看了網上的資料，終於能理解冒泡機制，現在寫下自己的一點心得，這裏邊也有從網上找的。
由於HTML中的對象都是層次結構，比如一個Table包含了多個TR，一個TR包含了多個TD,Bubble就是一個事件可以從子節點向所有父節點傳遞，比如鼠標點擊了一個TD，當前的event.srcElement就是這個TD，但是這種冒 泡機制使你可以從TR或者Table處截獲這個點擊事件，但是如果你event.cancelBubble，則就不能上傳事件。
冒泡的順序是由裏向外（div-->body-->html-->document-->window）,不過一般把document當做根節點。阻止冒泡的函數可以這麼寫
function stopFunc(event){
var evt = window.event||event;
if(evt.stopPropagation){
evt.stopPropagation();//火狐
}else{
evt.cancleBuble = true();//ie
}
}<body>
<form action="test" name="searchFrm">
<input type="text" id="keyid" name="keyword" >
<input type="submit" value="搜索">
<div id="container" οnmοusedοwn="stopFunc(event)" ></div>
</form>
</body>document.documentElement.onclick = function() {
document.getElementById('need_hide').style.display = 'none';
}
document.onclick = function(){
document.getElementById("container").style.display = "none";
}若不取消冒泡，那麼在對<div>進行click時，就會進行冒泡傳遞，被document這個根節點接收click事件，根節點發生的情況就是隻要點擊根節點，包括它的子元素，這個<div>都會被隱藏。而這個<div>又屬於document，所以在點擊<div>本身時也會隱藏。
相當於一個循環，根節點自動給它的子元素添加相同的事件，而子元素反過來又會發生冒泡來影響根節點，根節點又會對子元素本身產生影響，相互影響。
如果還想增加一個鏈接：<a href="#" id="btn_show">顯示層</a>，用它來控制該層顯示出來，那麼仍然需要在該鏈接被點擊時阻止冒泡事件的發生，加上以下代碼：
document.getElementById('btn_show').onclick = function(e) {
document.getElementById('need_hide').style.display = 'block';
stopPropagation(e);
}