<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<div id="outDiv" style="display:block;width:100px; height:100px;padding:50px;background-color:#060;">
<div id="inDiv" style="display:block;width:100px; height:100px; background-color:#FFF;"></div>
</div>
<a id="link" href="http://www.jask.cn" target="_blank">Jask</a>
<script>
//事件傳播
/*
當事件目標是Window對象或其他一些單獨對象時，瀏覽器簡單地通過調用對象上適當的處理程序響應事件，
當目標對象是文檔或文檔元素時，大部分事件都會“冒泡”到DOM樹根，調用目標的父元素的事件處理程序，然後調用在目標祖父元素上註冊的事件處理程序，一直到Domcument對象上，最後到達Window對象。
注意：focus blur scroll事件除外其它的大部分事件都會冒泡
*/
var outDiv = document.getElementById("outDiv");
var inDiv = document.getElementById("inDiv");
var links = document.getElementById("link");
//第三個參數是false是這個冒泡的執行順序是從內到外，反之，從外到內執行；
//DOMContentLoaded 這個相當於load
window.addEventListener("click",function(){alert("load");},false);
inDiv.addEventListener("click",function(){alert("inDiv");},false);
outDiv.addEventListener("click",function(event){alert("outDiv");
//這個是組織向上冒泡的IE8之前的不支持
//停止向上冒泡執行window中的屬性click
//event.stopPropagation(); //標準
//event.cancelBubble = true; //IE
},false);
//取消默認操作，也就是默認事件，在這裏是取消了一個a連接屬性href的地址，設置了，就取消了打開www.jask.cn的頁面，
//點擊這個連接是一個默認打開新面的事件所以是默認操作
//如 submit 也有他的默認操作
links.addEventListener("click",function(event){
event.preventDefault(); //標準
//event.returnValue = false //IE
//return false; //用於處理使用對象屬性註冊的處理程序
},false);
//事件傳播和默認操作是二個不同的機制，
//一個是向上冒泡 一個是執行默認操作
</script>
</body>
</html>
