深入分析js的冒泡事件
在javascript的dom操作做肯定會(huì)遇到j(luò)s的冒泡事件，最常見(jiàn)的是div彈窗事件如圖解
當(dāng)點(diǎn)擊灰色部分是彈窗消失，點(diǎn)擊黑色部分時(shí)沒(méi)有效果。
通過(guò)下面一段代碼來(lái)分析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瀏覽器的默認(rèn)開(kāi)發(fā)者工具的3d視圖可以清晰的看出div層的先后順序
圖解：
當(dāng)點(diǎn)擊按鈕時(shí)會(huì)彈出“我是button”再?gòu)棾觥拔沂莇iv”,因?yàn)橄扔|發(fā)按鈕事件之后觸發(fā)下一層div點(diǎn)擊事件，
事件的觸發(fā)是先進(jìn)先出原則。
圖解：
那么有些時(shí)候我們并不想多個(gè)事件的觸發(fā)而導(dǎo)致沖突，所以event有stopPropagation();方法來(lái)阻止冒泡
還有一個(gè)event的方法也是比較常用的比如一個(gè)鏈接，點(diǎn)擊鏈接時(shí)我不想跳轉(zhuǎn)，則使用event.preventDefault();方法
實(shí)例代碼如下
<!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()方法阻止事件冒泡
后者是阻止默認(rèn)的行為比如阻止超鏈接
*/
</script>
</body>
</html>
小伙伴們是否能夠全面理解js的冒泡事件了呢，有疑問(wèn)就給我留言吧
- Js冒泡事件詳解及阻止示例
- js阻止默認(rèn)事件與js阻止事件冒泡示例分享 js阻止冒泡事件
- JS阻止冒泡事件以及默認(rèn)事件發(fā)生的簡(jiǎn)單方法
- JS冒泡事件的快速解決方法
- Js 冒泡事件阻止實(shí)現(xiàn)代碼
- 關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應(yīng)層級(jí)
- js 冒泡事件與事件監(jiān)聽(tīng)使用分析
- javaScript 事件綁定、事件冒泡、事件捕獲和事件執(zhí)行順序整理總結(jié)
- js事件冒泡、事件捕獲和阻止默認(rèn)事件詳解
- javascript事件冒泡和事件捕獲詳解
- js事件監(jiān)聽(tīng)機(jī)制(事件捕獲)總結(jié)
- js之事件冒泡和事件捕獲詳細(xì)介紹
- JS冒泡事件與事件捕獲實(shí)例詳解
相關(guān)文章
淺談Javascript常用正則表達(dá)式應(yīng)用
這篇文章主要介紹了Javascript常用正則表達(dá)式應(yīng)用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Js刪除數(shù)組中某一項(xiàng)或幾項(xiàng)的幾種方法(推薦)
下面小編就為大家?guī)?lái)一篇Js刪除數(shù)組中某一項(xiàng)或幾項(xiàng)的幾種方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
本文給大家詳細(xì)介紹了JavaScript正則表達(dá)式的分組匹配的概念以及具體的使用方法并附上了相關(guān)示例，有需要的小伙伴可以參考下。2016-02-02
深入理解JavaScript系列（19）：求值策略(Evaluation strategy)詳解
這篇文章主要介紹了深入理解JavaScript系列（19）：求值策略(Evaluation strategy)詳解,本文講解了一般理論、按值傳遞、按引用傳遞、按共享傳遞（Call by sharing）、按共享傳遞是按值傳遞的特例等內(nèi)容,需要的朋友可以參考下2015-03-03
這篇文章主要簡(jiǎn)單介紹了Unicode與JavaScript的發(fā)展史的相關(guān)資料,需要的朋友可以參考下2015-01-01
簡(jiǎn)介JavaScript中的setTime()方法的使用
這篇文章主要介紹了簡(jiǎn)介JavaScript中的setTime()方法的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
2008-01-01
這個(gè)XMLHttpRequest的新版本，提出了很多有用的新功能，將大大推動(dòng)互聯(lián)網(wǎng)革新。本文就對(duì)這個(gè)新版本進(jìn)行詳細(xì)介紹2016-08-08
實(shí)例講解JavaScript中instanceof運(yùn)算符的用法
JavaScript中的instanceof運(yùn)算符可以用來(lái)判斷對(duì)象類型,而更重要的是instanceof能夠判斷對(duì)象的繼承關(guān)系,這里我們就來(lái)以實(shí)例講解JavaScript中instanceof運(yùn)算符的用法2016-06-06
js中parseFloat(參數(shù)1,參數(shù)2)定義和用法及注意事項(xiàng)
今天在看jquery時(shí)用到了parseFloat(第一個(gè)參數(shù)，10),對(duì)這兩個(gè)參數(shù)很是疑惑，于是整理搜集了一下，曬出來(lái)與大家分享，希望本文對(duì)你有所幫助，感興趣的朋友可以了解下2013-01-01