张子豪以前学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
如斯可以看出冒泡事务便是从事务所能触发的最底层元素起头的，然后往上逐层触发事务。
捕捉事务则好和它相反。
注重事项
- 若是有效就投一票吧
来源：百闻（微信/QQ号：9397569），转载请保留出处和链接！
本文链接：https://www.ibaiwen.com/web/239174.html
- 热门文章
-
WB蒙特利尔(WB Montreal)——欧美十大最差视频游戏开发商
迅猛龙(Velociraptor)——欧美史前十大死亡动物
什么是果酱猫(What Marmalade Cats)？
神奇蜘蛛侠2(The Amazing Spider-Man 2)——欧美最佳蜘蛛侠电影
希瑟(Heather)——欧美十大最佳柯南灰歌
二人梭哈
faceu激萌怎么把瘦脸开到最大
奥兹奥斯本(Ozzy Osbourne)——欧美十大高估歌手
什么是小脑前下动脉(Anterior Inferior Cerebellar Artery)？
我应该知道康涅狄格州的什么(What Should I Know About Connecticut)？
- 热评文章
- 最新评论
-
- 最近访客
-
- 站点信息
-
- 文章总数:200248
- 页面总数:9
- 分类总数:1
- 标签总数:0
- 评论总数:0
- 浏览总数:497