萬盛學電腦網 >> 腳本專題 >> javascript >> js中的事件捕捉模型與冒泡模型實例分析
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：
<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程序設計有所幫助。
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved