<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('par').addEventListener('click',function() {alert('par');},true);
document.getElementById('son').addEventListener('click',function() {alert('son');},true);
}
</script>
<style type="text/css">
#par{width:300px;height:200px;background:gray;}
#son{width:200px;height:100px;background:green;}
</style>
</head>
<body>
<div id="par">
<div id="son"></div>
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('par').addEventListener('click',function() {alert('par');});
document.getElementById('son').addEventListener('click',function() {alert('son');});
}
</script>
<style type="text/css">
#par{width:300px;height:200px;background:gray;}
#son{width:200px;height:100px;background:green;}
</style>
</head>
<body>
<div id="par">
<div id="son"></div>
</div>
</body>
</html>
addEventListener：第三個參數為可選參數，默認情況下為false，表示冒泡模型，即先觸發最小的層(id為son的div)；而如果加上true參數，則說明是捕捉模型(從html-->body--->div)，按這樣的層次來觸發。
實例1的html代碼有兩個div，小的div包含在大的div內，點擊小的div時，先是會觸發alert('par')事件；然后觸發alert('son')整件。實例2正好相反。
