挖洞与冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="z">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
color: white;
}
</style>
</head>
<body>
<section>
<div>
<a href="javascript:void(0);">可以点击</a>
</div>
</section>
<script>
var sec = document.querySelector("section");
var div = document.querySelector("div");
var a = document.querySelector('a');
//addEventListener(1,2,3)
// 第三个参数是可以选择的，表示事件在哪个阶段执行，它的取值是true(false)，
// 默认是false false 代表冒泡
// true 代表挖洞 事件的两个阶段 挖洞和冒泡
// 挖洞（捕获）：从dom 跟结点向里面找，直到找到了添加的监听事件的元素
// 冒泡：和挖洞相反的过程
// 可以选择是挖洞或者冒泡阶段的监听事件
div.addEventListener("click",function(){
});
document.documentElement.addEventListener("click",function(){
console.log("HTML 挖洞");
setTimeout(function(){
div.style.backgroundColor = 'green';
},1000)
},true);
document.documentElement.addEventListener("click",function(){
console.log("HTML 冒泡");
setTimeout(function(){
div.style.backgroundColor = 'pink';
},2000)
},false);
document.body.addEventListener("click",function(){
console.log("body 挖洞");
},true);
document.body.addEventListener("click",function(){
console.log("body 冒泡");
},false);
sec.addEventListener("click",function(event){
console.log("section 挖洞");
// stopPropagetion() 可以停止事件的传播
// 不会影响同级别的监听事件
// event.stopPropagation();
// stopImmediatePropagation() 立刻停止
// event.stopImmediatePropagation();
},true);
sec.addEventListener("click",function(){
console.log("section-2 挖洞");
},true);
sec.addEventListener("click",function(){
console.log("section 冒泡");
},false);
div.addEventListener("click",function(){
console.log("div 挖洞");
},true);
div.addEventListener("click",function(){
console.log("div 冒泡");
},false);
a.addEventListener("click",function(){
console.log("a 挖洞");
},true);
a.addEventListener("click",function(){
console.log("a 冒泡");
},false);
</script>
</body>
</html>
