极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style type="text/css">
#child{
background: red;
width:50px;
height:50px;
}
#father{
width:100px;
height:100px;
background:green;
}
#grandparent{
width:150px;
height:150px;
background:black;
margin:100px auto 0;
}
</style>
</head>
<body>
<div id='grandparent'>
<div id='father'>
<div id='child'></div>
</div>
</div>
</body>
<script type="text/javascript">
var grandparent = document.getElementById("grandparent");
var parent = document.getElementById("father");
var child = document.getElementById('child');
var html = document.getElementsByTagName("html")[0];
var body = document.body;
grandparent.addEventListener("click",function () {
console.log("I am capturing grandparent");
},true);
grandparent.addEventListener("click",function () {
console.log("I am grandparent");
},false);
parent.addEventListener("click",function() {
console.log("I am capturing parent");
},true);
parent.addEventListener("click",function() {
console.log("I am parent");
},false);
child.addEventListener("click",function() {
console.log("I am capturing child");
},true);
child.addEventListener("click",function() {
console.log("I am child");
},false);
body.addEventListener("click",function() {
console.log("I am capturing body");
},true);
body.addEventListener("click",function() {
console.log("I am body");
},false);
html.addEventListener("click",function() {
console.log("I am capturing html");
},true);
html.addEventListener("click",function() {
console.log("I am html");
},false);
document.addEventListener("click",function() {
console.log("I am capturing document");
},true);
document.addEventListener("click",function() {
console.log("I am document");
},false);
window.addEventListener("click",function() {
console.log("I am capturing window");
},true);
window.addEventListener("click",function() {
console.log("I am window");
},false);
parent.addEventListener("click",function() {
console.log("I am capturing parent");
},true);
parent.addEventListener("click",function() {
console.log("I am parent");
},false);
</script>
</html>
注意：我将
parent.addEventListener("click",function() {
console.log("I am capturing parent");
},true);
parent.addEventListener("click",function() {
console.log("I am parent");
},false);
上面的两行代码重复了两次，一次在中间，一次在末尾。
点击緑色的div,得到下面的结果：
test.html:75 I am capturing window
test.html:69 I am capturing document
test.html:63 I am capturing html
test.html:57 I am capturing body
test.html:39 I am capturing grandparent
test.html:45 I am capturing parent
test.html:48 I am parent
test.html:81 I am capturing parent
test.html:84 I am parent
test.html:42 I am grandparent
test.html:60 I am body
test.html:66 I am html
test.html:72 I am document
test.html:78 I am window
为何结果不是
test.html:75 I am capturing window
test.html:69 I am capturing document
test.html:63 I am capturing html
test.html:57 I am capturing body
test.html:39 I am capturing grandparent
test.html:45 I am capturing parent
test.html:48 I am parent
test.html:42 I am grandparent
test.html:60 I am body
test.html:66 I am html
test.html:72 I am document
test.html:78 I am window
或者
test.html:75 I am capturing window
test.html:69 I am capturing document
test.html:63 I am capturing html
test.html:57 I am capturing body
test.html:39 I am capturing grandparent
test.html:45 I am capturing parent
test.html:81 I am capturing parent
test.html:48 I am parent
test.html:84 I am parent
test.html:42 I am grandparent
test.html:60 I am body
test.html:66 I am html
test.html:72 I am document
test.html:78 I am window
请解释？
