DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js中的事件捕捉模型與冒泡模型實例教程分析
js中的事件捕捉模型與冒泡模型實例教程分析
編輯:關於JavaScript     

本文實例講述了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程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved