直接上代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.first {
width: 500px;
height: 500px;
background-color: #0000cc;
}
.second {
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<!--第一层DIV-->
<div class="first">
<!--第二层DIV-->
<div class="second">
<!--第三层中有个button-->
<input type="button" value="click" class="btn" />
</div>
</div>
<script type="text/javascript">
window.onload = function () {
register();
};
function register() {
//获取div以及button
let div1 = document.getElementsByClassName('first')[0];
let div2 = document.getElementsByClassName('second')[0];
let btn = document.getElementsByClassName('btn')[0];
//为三个目标标签注册点击事件
div1.addEventListener('click', func, false);
div2.addEventListener('click', func, false);
btn.addEventListener('click', func, false);
}
function func() {
let dict = {
'1': '捕获阶段',
'2': '处于目标阶段',
'3': '冒泡阶段'
};
alert(this.className.toLowerCase() + '的事件在' + dict[event.eventPhase] + '被触发');
}
</script>
</body>
</html>
先看一下运行效果：
现在点击按钮，会弹出三个对话框：
看到这里，聪明的你再稍微思考一下，应该就懂得事件冒泡了，可以把代码中addEventListener中的false改为true，然后再看一下运行效果，然后你就理解事件捕获了。