<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ol, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none
}
#wrap{
width: 200px;
height: 200px;
background-color: #cc3366;
}
#child{
width: 150px;
height: 150px;
background-color: #8CC1DE;
}
#grandchild{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="wrap">
<div id="child">
<div id="grandchild"></div>
</div>
</div>
<script>
let oWrap = document.getElementById("wrap");
let oChild = document.getElementById("child");
let oGrandchild = document.getElementById("grandchild");
oWrap.addEventListener("click", function () {
console.log("爷爷被点击了");
});
oChild.addEventListener("click", function () {
console.log("爸爸被点击了");
},true);
oGrandchild.addEventListener("click", function () {
console.log("儿子被点击了");
});
// 冒泡从下往上冒泡 儿子到爷爷
// 捕获反过来
// 主流浏览器中才有的捕获机制
// 1 html 7
// 2 body 6
// 3 div#box1 5
// 4 div#box2 4
// 执行顺序是这个样子的
// 事件的冒泡 box2->box1->body->html
// 事件的捕获 html->body->box1->box2
// 如果在box1处被捕获了 box2不会显示
// 1234捕获 4567冒泡
// 写true就是捕获 不写就是冒泡
</script>
</body>
</html>
Python3Turtle