js中的事件捕捉模型與冒泡模型實(shí)例分析
本文實(shí)例講述了js中的事件捕捉模型與冒泡模型。分享給大家供大家參考。
具體實(shí)現(xiàn)方法如下：
實(shí)例1：
<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>
實(shí)例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：第三個(gè)參數(shù)為可選參數(shù)，默認(rèn)情況下為false，表示冒泡模型，即先觸發(fā)最小的層(id為son的div)；而如果加上true參數(shù)，則說明是捕捉模型(從html-->body--->div)，按這樣的層次來觸發(fā)。
實(shí)例1的html代碼有兩個(gè)div，小的div包含在大的div內(nèi)，點(diǎn)擊小的div時(shí)，先是會(huì)觸發(fā)alert('par')事件；然后觸發(fā)alert('son')整件。實(shí)例2正好相反。
如果是采用"對(duì)象.onclick"屬性的方式來觸發(fā)事件，采用的是冒泡模型。
IE不支持addEventListener，而是使用attachEvent。但attachEvent不支持第三個(gè)參數(shù)，它沒有捕捉模型。
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
layui點(diǎn)擊數(shù)據(jù)表格添加或刪除一行的例子
今天小編就為大家分享一篇layui點(diǎn)擊數(shù)據(jù)表格添加或刪除一行的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Ajax請(qǐng)求通常不支持瀏覽器的后退按鈕,因?yàn)樗鼈兪钱惒降?不會(huì)導(dǎo)致頁面重新加載(刷新),但如果你想要用戶能夠通過瀏覽器的后退按鈕回到之前的頁面狀態(tài),你可以通過幾種方法來解決這個(gè)問題,感興趣的朋友跟隨小編一起看看吧2024-10-10
淺析JavaScript中的array數(shù)組類型系統(tǒng)
除了對(duì)象之外，數(shù)組Array類型可能是javascript中最常用的類型了。而且，javascript中的數(shù)組與其他多數(shù)語言中的數(shù)組有著相當(dāng)大的區(qū)別。本文將介紹javascript中的數(shù)組Array類型，非常不錯(cuò)，感興趣的朋友一起看下吧2016-07-07
JS實(shí)現(xiàn)時(shí)間校驗(yàn)的代碼
這篇文章主要介紹了JS實(shí)現(xiàn)時(shí)間校驗(yàn)的代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
Javascript使用uploadify來實(shí)現(xiàn)多文件上傳
本篇文章主要介紹了Javascript使用uploadify來實(shí)現(xiàn)多文件上傳，具有一定的參考價(jià)值，有需要的可以了解一下。2016-11-11
js簡(jiǎn)單實(shí)現(xiàn)自動(dòng)生成表格功能示例
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)自動(dòng)生成表格功能,結(jié)合實(shí)例形式分析了JavaScript針對(duì)數(shù)組元素遍歷與頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-06-06
bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
輸入框組默認(rèn)是div.input-group。接下來通過本文給大家介紹bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整，感興趣的朋友一起看看吧2016-10-10
javascript中全局對(duì)象的parseInt()方法使用介紹
全局對(duì)象的parseInt()方法該如何使用，下面為大家詳細(xì)介紹下，感興趣的朋友不要錯(cuò)過2013-12-12
JavaScript中的普通函數(shù)和箭頭函數(shù)的區(qū)別和用法詳解
這篇文章主要介紹了JavaScript中的普通函數(shù)和箭頭函數(shù)的區(qū)別和用法詳解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
使用JS給靜態(tài)頁面添加搜索功能的實(shí)現(xiàn)方法
靜態(tài)頁面通常由HTML、CSS 和 JavaScript 等靜態(tài)文件組成,這些文件在服務(wù)器上不會(huì)動(dòng)態(tài)生成或修改,所以加載速度通常比較快,本文給大家介紹了如何只使用JS給靜態(tài)網(wǎng)頁添加站內(nèi)全局搜索功能,文中有詳細(xì)的解決方案,需要的朋友可以參考下2023-11-11