你好JS：[3]捕獲和冒泡事件模型
以前學JS的時辰對捕捉和冒泡事務一向都感覺難于理解，也找過良多資料，但那些年夜多都是讓人看不大白的。此刻我就用一種比力直不雅的方式描述捕捉和冒泡事務模子。
東西/原料
- JavaScript
理論
- 1
捕捉事務就像你折開一個層層包裹的禮品盒，拆開一層沒有看到就繼續拆，直到拆到為止
- 2
冒泡事務剛好和捕捉事務相反
例子
- 1
這里就經由過程一個例子讓你更直不雅地領會冒泡事務和捕捉事務，完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
#a {
width: 500px;
height: 500px;
background: #373841
}
#b {
width: 200px;
height: 200px;
background: #616374
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
</div>
</body>
<script>
//函數
var fa = function () {
alert("a");
}
var fb = function () {
alert("b");
}
//A
var A = document.getElementById("a");
A.addEventListener("click", fa, false);
//B
var B = document.getElementById("b");
B.addEventListener("click", fb, false);
</script>
</html>
- 2
事務監聽器以冒泡的體例注冊（false便是開啟了冒泡體例，注重例子中的addEventListener不兼容IE）
- 3
運行代碼，會發現最先彈出“b”，申明最先觸發了最底層的B元素：
- 4
點擊確定，會彈出"a",申明繼B元素之后，觸發了A元素
- 5
如斯可以看出冒泡事務便是從事務所能觸發的最底層元素起頭的，然后往上逐層觸發事務。
捕捉事務則好和它相反。
注重事項
- 若是有效就投一票吧
- 發表于 2018-04-16 00:00
- 閱讀 ( 1344 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章