<!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{width:400px;height:400px;background: red}
.box2{width:300px;height:300px;background: blue}
.box3{width: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浏覽器沒有捕獲
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)