js中的事件捕捉模型與冒泡模型執行個體分析
具體實現方法如下：
執行個體1：
代碼如下:
<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>
執行個體2：
代碼如下:
<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正好相反。
如果是採用"對象.onclick"屬性的方式來觸發事件，採用的是冒泡模型。
IE不支援addEventListener，而是使用attachEvent。但attachEvent不支援第三個參數，它沒有捕捉模型。
希望本文所述對大家的javascript程式設計有所協助。
