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>
<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>
<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)文章
layui點擊數(shù)據(jù)表格添加或刪除一行的例子
今天小編就為大家分享一篇layui點擊數(shù)據(jù)表格添加或刪除一行的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Ajax請求通常不支持瀏覽器的后退按鈕,因為它們是異步的,不會導(dǎo)致頁面重新加載(刷新),但如果你想要用戶能夠通過瀏覽器的后退按鈕回到之前的頁面狀態(tài),你可以通過幾種方法來解決這個問題,感興趣的朋友跟隨小編一起看看吧2024-10-10
淺析JavaScript中的array數(shù)組類型系統(tǒng)
除了對象之外，數(shù)組Array類型可能是javascript中最常用的類型了。而且，javascript中的數(shù)組與其他多數(shù)語言中的數(shù)組有著相當(dāng)大的區(qū)別。本文將介紹javascript中的數(shù)組Array類型，非常不錯，感興趣的朋友一起看下吧2016-07-07
這篇文章主要介紹了JS實現(xiàn)時間校驗的代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
Javascript使用uploadify來實現(xiàn)多文件上傳
本篇文章主要介紹了Javascript使用uploadify來實現(xiàn)多文件上傳，具有一定的參考價值，有需要的可以了解一下。2016-11-11
這篇文章主要介紹了js簡單實現(xiàn)自動生成表格功能,結(jié)合實例形式分析了JavaScript針對數(shù)組元素遍歷與頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2020-06-06
bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
輸入框組默認(rèn)是div.input-group。接下來通過本文給大家介紹bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整，感興趣的朋友一起看看吧2016-10-10
javascript中全局對象的parseInt()方法使用介紹
全局對象的parseInt()方法該如何使用，下面為大家詳細(xì)介紹下，感興趣的朋友不要錯過2013-12-12
JavaScript中的普通函數(shù)和箭頭函數(shù)的區(qū)別和用法詳解
這篇文章主要介紹了JavaScript中的普通函數(shù)和箭頭函數(shù)的區(qū)別和用法詳解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
使用JS給靜態(tài)頁面添加搜索功能的實現(xiàn)方法
靜態(tài)頁面通常由HTML、CSS 和 JavaScript 等靜態(tài)文件組成,這些文件在服務(wù)器上不會動態(tài)生成或修改,所以加載速度通常比較快,本文給大家介紹了如何只使用JS給靜態(tài)網(wǎng)頁添加站內(nèi)全局搜索功能,文中有詳細(xì)的解決方案,需要的朋友可以參考下2023-11-11