欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js中的事件捕捉模型與冒泡模型實例分析

 更新時間：2015年01月10日 16:31:08   投稿：shichen2014  
這篇文章主要介紹了js中的事件捕捉模型與冒泡模型,實例分析了js事件的執(zhí)行順序與冒泡模型的原理,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了js中的事件捕捉模型與冒泡模型。分享給大家供大家參考。

具體實現(xiàn)方法如下：

實例1：

復(fù)制代碼 代碼如下:
<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：
復(fù)制代碼 代碼如下:
<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：第三個參數(shù)為可選參數(shù)，默認(rèn)情況下為false，表示冒泡模型，即先觸發(fā)最小的層(id為son的div)；而如果加上true參數(shù)，則說明是捕捉模型(從html-->body--->div)，按這樣的層次來觸發(fā)。

實例1的html代碼有兩個div，小的div包含在大的div內(nèi)，點擊小的div時，先是會觸發(fā)alert('par')事件；然后觸發(fā)alert('son')整件。實例2正好相反。

如果是采用"對象.onclick"屬性的方式來觸發(fā)事件，采用的是冒泡模型。

IE不支持addEventListener，而是使用attachEvent。但attachEvent不支持第三個參數(shù)，它沒有捕捉模型。

希望本文所述對大家的javascript程序設(shè)計有所幫助。

相關(guān)文章

最新評論