<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{400px;height:400px;background: red}
.box2{300px;height:300px;background: blue}
.box3{200px;height:200px;background: green}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</body>
<script>
var obox1 = document.querySelector(".box1")
var obox2 = document.querySelector(".box2")
var obox3 = document.querySelector(".box3")
obox1.addEventListener("click",function(){
alert("捕获red")
},true)
obox1.addEventListener("click",function(){
alert("冒泡red")
},false)
obox2.addEventListener("click",function(){
alert("捕获blue")
},true)
obox2.addEventListener("click",function(){
alert("冒泡blue")
},false)
obox3.addEventListener("click",function(){
alert("green")
},false)
// 事件流分为三个阶段：
// 冒泡阶段：从里向外
// 目标（当前事件）阶段
// 捕获阶段：从外向内
若同事有冒泡和捕获，先捕获后冒泡。
IE浏览器没有捕获
</script>
</html>