JS冒泡事件與事件捕獲實例詳解
更新時間：2016年11月25日 11:36:17 作者：牛逼的霍嘯林
這篇文章主要介紹了JS冒泡事件與事件捕獲,結(jié)合實例形式分析了javascript冒泡的原理與阻止冒泡的相關(guān)操作技巧,需要的朋友可以參考下
本文實例分析了JS冒泡事件與事件捕獲。分享給大家供大家參考，具體如下：
案例
<!DOCTYPE html>
<html>
<head>
<title>冒泡事件</title>
<script type="text/javascript">
window.onload = function(){
window.onclick = function(){
alert("Window"); // 頂級
};
document.onclick = function(){
alert("Document"); // 次頂級
};
document.documentElement.onclick = function(){
alert("Html"); // 次次頂級
};
document.body.onclick = function(){
alert("Body"); // 次次次頂級
};
document.getElementById("myDiv").onclick = function(){
alert("Div"); // 最先執(zhí)行，并且會傳遞到上一層。點擊兩次，則按順序執(zhí)行兩次。如果上級也有點擊事件的話
};
}
</script>
</head>
<body>
<div id="myDiv">點我</div>
</body>
</html>
小結(jié)
1.點擊myDiv。依次是Div-Body-Html-Document-Window
2.點擊其他空白地方。依次是Html-Document-Window
3.連續(xù)點擊兩次，會按順序執(zhí)行兩次
4.冒泡的前提是，父級也定義了相應(yīng)的事件
再看一個更復(fù)雜的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕捉</title>
<script type="text/javascript">
window.onload = function(){
window.addEventListener("click", function(){
alert("Window - true");
}, true); // true - 事件句柄在捕獲階段執(zhí)行 ,false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行
document.addEventListener("click", function(){
alert("Document - true");
}, true);
document.documentElement.addEventListener("click", function(){
alert("Html - true");
}, true);
document.body.addEventListener("click", function(){
alert("Body - true");
}, true);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - true");
}, true);
window.addEventListener("click", function(){
alert("Window - false");
}, false); // true - 事件句柄在捕獲階段執(zhí)行 ,false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行
document.addEventListener("click", function(){
alert("Document - false");
}, false);
document.documentElement.addEventListener("click", function(){
alert("Html - false");
}, false);
document.body.addEventListener("click", function(){
alert("Body - false");
}, false);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - false");
}, false);
window.onclick = function(){
alert("Window - click"); // 頂級
};
document.onclick = function(){
alert("Document - click"); // 次頂級
};
document.documentElement.onclick = function(){
alert("Html - click"); // 次次頂級
};
document.body.onclick = function(){
alert("Body - click"); // 次次次頂級
};
document.getElementById("myDiv").onclick = function(){
alert("Div - click"); // 最先執(zhí)行，并且會傳遞到上一層。點擊兩次，則按順序執(zhí)行兩次。如果上級也有點擊事件的話
};
}
</script>
</head>
<body>
<div id="myDiv">點我</div>
</body>
</html>
小結(jié)
1.點擊的執(zhí)行結(jié)果是
Window - true
Document - true
Html - true
Body - true
Div - true
Div - false
Div - click
Body - false
Body - click
Html - false
Html - click
Document - false
Document - click
Window - false
Window - click
2.順序與js代碼順序無關(guān)
3.就算沒有定義點擊事件，一樣可以捕獲點擊事件，只要點擊到，就能捕獲到
再次改造，阻止冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕捉</title>
<script type="text/javascript">
window.onload = function(){
document.addEventListener("click", function(){
alert("Document - true");
}, true);
window.addEventListener("click", function(){
alert("Window - true");
}, true); // true - 事件句柄在捕獲階段執(zhí)行 ,false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行
document.documentElement.addEventListener("click", function(){
alert("Html - true");
}, true);
document.body.addEventListener("click", function(){
alert("Body - true");
}, true);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - true");
}, true);
window.addEventListener("click", function(){
alert("Window - false");
}, false); // true - 事件句柄在捕獲階段執(zhí)行 ,false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行
document.addEventListener("click", function(){
alert("Document - false");
}, false);
document.documentElement.addEventListener("click", function(){
alert("Html - false");
}, false);
document.body.addEventListener("click", function(){
alert("Body - false");
}, false);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - false");
}, false);
window.onclick = function(){
alert("Window - click"); // 頂級
};
document.onclick = function(){
alert("Document - click"); // 次頂級
};
document.documentElement.onclick = function(){
alert("Html - click"); // 次次頂級
};
document.body.onclick = function(){
alert("Body - click"); // 次次次頂級
};
document.getElementById("myDiv").onclick = function(){
alert("Div - click"); // 最先執(zhí)行，并且會傳遞到上一層。點擊兩次，則按順序執(zhí)行兩次。如果上級也有點擊事件的話
event.stopPropagation(); // 阻止冒泡
};
}
</script>
</head>
<body>
<div id="myDiv">點我</div>
</body>
</html>
小結(jié)
Window - true
Document - true
Html - true
Body - true
Div - true
Div - false
Div - click
終止了，沒有后續(xù)的內(nèi)容了
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript時間與日期操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
js的拼接html，會有一些細(xì)節(jié)是需要注意的，也就是單引號的問題，下面有個示例，大家感受下2014-07-07
javascript代碼判斷按鈕是否被點擊了在項目中經(jīng)常會遇到這個需求，今天小編抽點時間給大家分享一段代碼關(guān)于javascript判斷按鈕是否被點擊的方法，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
那么今天我就用JavaScript代碼來實現(xiàn)這個效果吧，那么首先介紹一下整個的思路，首先我們先將確定輸入密碼的位數(shù)，我的需求是5位，那么就用一個div標(biāo)簽包住5個input標(biāo)簽2015-12-12
這篇文章主要介紹了如何使用js判斷瀏覽器是否支持html5,需要的朋友可以參考下2014-08-08
利用chrome瀏覽器進(jìn)行js調(diào)試并找出元素綁定的點擊事件詳解
“工欲善其事，必先利其器” 恩，這句話我覺得說的特別有道理，下面這篇文章主要給大家介紹了關(guān)于利用chrome瀏覽器進(jìn)行js調(diào)試并找出元素綁定的點擊事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-09-09
作為前端，一直以來都知道HTTP劫持與XSS跨站腳本、CSRF跨站請求偽造。防御這些劫持最好的方法是從后端入手，前端能做的太少。而且由于源碼的暴露，攻擊者很容易繞過防御手段。但這不代表我們?nèi)チ私膺@塊的相關(guān)知識是沒意義的，本文的許多方法，用在其他方面也是大有作用。2021-05-05
這篇文章主要給大家詳細(xì)介紹了javascript中if和switch，==和===的區(qū)別和聯(lián)系，十分的細(xì)致實用，有需要的小伙伴可以參考下。2015-07-07
這篇文章介紹了js判定是否原生方法，有需要的朋友可以參考一下2013-07-07
一些有關(guān)檢查數(shù)據(jù)的JS代碼...2006-09-09
這篇文章主要給大家介紹了關(guān)于js實用技巧之去除數(shù)組或者對象里重復(fù)選項的相關(guān)資料,JavaScript數(shù)組有很多內(nèi)置方法,可以操作和處理數(shù)據(jù),文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08