<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="fine">
FINE
</div>
<script>
//冒泡 从下往上
/*
var fine = document.querySelector("#fine")
fine.addEventListener("click",function(){
alert("FINE")
})
var body = document.querySelector("body")
fine.addEventListener("click",function(){
alert("body")
})
var html = document.querySelector("html")
fine.addEventListener("click",function(){
alert("html")
})
document.addEventListener("click",function(){
alert("document")
})
*/
//捕获 从上往下
var fine = document.querySelector("#fine")
fine.addEventListener("click",function(){
alert("FINE")
},true)
var body = document.querySelector("body")
fine.addEventListener("click",function(){
alert("body")
},true)
var html = document.querySelector("html")
fine.addEventListener("click",function(){
alert("html")
},true)
document.addEventListener("click",function(){
alert("document")
},true)
</script>
</body>
</html>
大佬们帮帮忙,冒泡事件正常显示,捕获事件出毛病了,先出现document,第二出现的是FINE,第三是body,第四是html