首页 > 代码库 > 挖洞与冒泡

挖洞与冒泡

<!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>

挖洞与冒泡