深入分析js的冒泡事件
更新時(shí)間：2014年12月05日 10:13:38 投稿：hebedich
本文通過幾段示例代碼，給我們深入分析了下javascript的冒泡事件，非常的詳細(xì)，這里推薦給大家，希望對(duì)大家有所幫助
在javascript的dom操作做肯定會(huì)遇到j(luò)s的冒泡事件，最常見的是div彈窗事件如圖解
當(dāng)點(diǎn)擊灰色部分是彈窗消失，點(diǎn)擊黑色部分時(shí)沒有效果。
通過下面一段代碼來分析js的冒泡事件
html代碼：
復(fù)制代碼 代碼如下:
<!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)開發(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();方法來阻止冒泡
還有一個(gè)event的方法也是比較常用的比如一個(gè)鏈接，點(diǎn)擊鏈接時(shí)我不想跳轉(zhuǎn)，則使用event.preventDefault();方法
實(shí)例代碼如下
復(fù)制代碼 代碼如下:
<!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的冒泡事件了呢，有疑問就給我留言吧
您可能感興趣的文章:
- 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)聽使用分析
- javaScript 事件綁定、事件冒泡、事件捕獲和事件執(zhí)行順序整理總結(jié)
- js事件冒泡、事件捕獲和阻止默認(rèn)事件詳解
- javascript事件冒泡和事件捕獲詳解
- js事件監(jiān)聽機(jī)制(事件捕獲)總結(jié)
- js之事件冒泡和事件捕獲詳細(xì)介紹
- JS冒泡事件與事件捕獲實(shí)例詳解
相關(guān)文章
這篇文章主要介紹了JS瀏覽器事件循環(huán)機(jī)制，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
網(wǎng)頁中實(shí)現(xiàn)瀏覽器的最大，最小化和關(guān)閉按鈕
網(wǎng)頁中實(shí)現(xiàn)瀏覽器的最大，最小化和關(guān)閉按鈕...2007-03-03
JavaScript瀏覽器對(duì)象之一Window對(duì)象詳解
下面小編就為大家?guī)硪黄狫avaScript瀏覽器對(duì)象之一Window對(duì)象詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
js正則表達(dá)式(RegExp對(duì)象) 的使用。2010-12-12
javascrpt綁定事件之匿名函數(shù)無法解除綁定問題
經(jīng)常聽到有人說，匿名函數(shù)綁定事件不好控制啊，無法解除綁定啊，本文將介紹詳細(xì)的解決方法，需要的朋友可以參考下2012-12-12
Javascript實(shí)例教程(19) 使用HoTMetal(6)
Javascript實(shí)例教程(19) 使用HoTMetal(6)...2006-12-12
CentOS環(huán)境中MySQL修改root密碼方法
這篇文章給大家講述了如何遵循12條方法來寫出高質(zhì)量的JS代碼的經(jīng)驗(yàn)，有這方便需要的朋友參考下吧。2018-01-01
Javascript學(xué)習(xí)筆記之?dāng)?shù)組的遍歷和 length 屬性
我們一般用循環(huán)來遍歷數(shù)組，而循環(huán)一直是 JavaScript 性能問題的常見來源，有時(shí)循環(huán)用得不好會(huì)嚴(yán)重降低代碼的運(yùn)行速度。數(shù)組的屬性可以分為三種:length屬性,索引屬性,其他屬性.和普通對(duì)象相比,數(shù)組對(duì)象特殊的地方就是它的length屬性和索引屬性。2014-11-11
這篇文章主要介紹了JavaScript中的選擇器，下面和小編一起了看看吧2019-05-05
下面小編就為大家?guī)硪黄猨avascript的幾種繼承方法介紹。小編覺得挺不錯(cuò)的。現(xiàn)在分享給大家，給大家一個(gè)參考2016-03-03