深入分析js的冒泡事件
更新時間：2014年12月05日 10:13:38 投稿：hebedich
本文通過幾段示例代碼，給我們深入分析了下javascript的冒泡事件，非常的詳細，這里推薦給大家，希望對大家有所幫助
在javascript的dom操作做肯定會遇到js的冒泡事件，最常見的是div彈窗事件如圖解
當點擊灰色部分是彈窗消失，點擊黑色部分時沒有效果。
通過下面一段代碼來分析js的冒泡事件
html代碼：
復制代碼 代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js冒泡事件</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>js冒泡事件分析</h1>
<hr>
<div class="box bg-gray">
<button class="btn">
Click me !
</button>
</div>
</div>
<script>
var box=document.querySelector(".box"),
btn=document.querySelector(".btn");
box.onclick=function(event){
alert("我是div");
}
btn.onclick=function(event){
alert("我是button");
}
</script>
</body>
</html>
使用firefox瀏覽器的默認開發(fā)者工具的3d視圖可以清晰的看出div層的先后順序
圖解：
當點擊按鈕時會彈出“我是button”再彈出“我是div”,因為先觸發(fā)按鈕事件之后觸發(fā)下一層div點擊事件，
事件的觸發(fā)是先進先出原則。
圖解：
那么有些時候我們并不想多個事件的觸發(fā)而導致沖突，所以event有stopPropagation();方法來阻止冒泡
還有一個event的方法也是比較常用的比如一個鏈接，點擊鏈接時我不想跳轉(zhuǎn)，則使用event.preventDefault();方法
實例代碼如下
復制代碼 代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js冒泡事件</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>js冒泡事件分析</h1>
<hr>
<div class="box bg-gray">
<button class="btn">
Click me !
</button>
<a href=" </div>
</div>
<script>
var box=document.querySelector(".box"),
btn=document.querySelector(".btn");
box.onclick=function(event){
alert("我是div");
}
btn.onclick=function(event){
alert("我是button");
event.stopPropagation();
}
document.getElementById('link').onclick=function(event){
alert("我是link");
event.preventDefault();
}
/*區(qū)分event.stopPropagation();和event.preventDefault();
前者使用stopPropagation()方法阻止事件冒泡
后者是阻止默認的行為比如阻止超鏈接
*/
</script>
</body>
</html>
小伙伴們是否能夠全面理解js的冒泡事件了呢，有疑問就給我留言吧
您可能感興趣的文章:
- Js冒泡事件詳解及阻止示例
- js阻止默認事件與js阻止事件冒泡示例分享 js阻止冒泡事件
- JS阻止冒泡事件以及默認事件發(fā)生的簡單方法
- JS冒泡事件的快速解決方法
- Js 冒泡事件阻止實現(xiàn)代碼
- 關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應層級
- js 冒泡事件與事件監(jiān)聽使用分析
- javaScript 事件綁定、事件冒泡、事件捕獲和事件執(zhí)行順序整理總結(jié)
- js事件冒泡、事件捕獲和阻止默認事件詳解
- javascript事件冒泡和事件捕獲詳解
- js事件監(jiān)聽機制(事件捕獲)總結(jié)
- js之事件冒泡和事件捕獲詳細介紹
- JS冒泡事件與事件捕獲實例詳解
相關(guān)文章
這篇文章主要介紹了Javascript常用正則表達式應用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
下面小編就為大家?guī)硪黄狫s刪除數(shù)組中某一項或幾項的幾種方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
本文給大家詳細介紹了JavaScript正則表達式的分組匹配的概念以及具體的使用方法并附上了相關(guān)示例，有需要的小伙伴可以參考下。2016-02-02
深入理解JavaScript系列（19）：求值策略(Evaluation strategy)詳解
這篇文章主要介紹了深入理解JavaScript系列（19）：求值策略(Evaluation strategy)詳解,本文講解了一般理論、按值傳遞、按引用傳遞、按共享傳遞（Call by sharing）、按共享傳遞是按值傳遞的特例等內(nèi)容,需要的朋友可以參考下2015-03-03
這篇文章主要簡單介紹了Unicode與JavaScript的發(fā)展史的相關(guān)資料,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了簡介JavaScript中的setTime()方法的使用,是JS入門學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
2008-01-01
這個XMLHttpRequest的新版本，提出了很多有用的新功能，將大大推動互聯(lián)網(wǎng)革新。本文就對這個新版本進行詳細介紹2016-08-08
實例講解JavaScript中instanceof運算符的用法
JavaScript中的instanceof運算符可以用來判斷對象類型,而更重要的是instanceof能夠判斷對象的繼承關(guān)系,這里我們就來以實例講解JavaScript中instanceof運算符的用法2016-06-06
js中parseFloat(參數(shù)1,參數(shù)2)定義和用法及注意事項
今天在看jquery時用到了parseFloat(第一個參數(shù)，10),對這兩個參數(shù)很是疑惑，于是整理搜集了一下，曬出來與大家分享，希望本文對你有所幫助，感興趣的朋友可以了解下2013-01-01