js事件冒泡、事件捕获、蒙版弹框运用

首先简单解释下事件冒泡与事件捕获

事件冒泡：当事件在某一DOM元素被触发时，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

    
第一层
    
        
第二层
        
            
第三层
        
    

从上面简单的例子中可以得出，冒泡事件就是在执行自身事件后，依次执行父辈事件的一种现象。

如果想阻止这种现象，可以通过添加event.stopPropagation()方法阻止冒泡事件。

//兼容性写法
    if(event && event.stopPropagation){
        event.stopPropagation()
    }else{     //兼容ie
        event.cancelBubble = true
    };

注：jq中同样可以通过stopPropagation方法阻止冒泡事情

事件捕获：事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。（与冒泡相反）

实用例子：蒙版弹框

    
      *{  margin: 0;  padding: 0;  }
      .testBody{  background-image: url("images/海洋天空.jpg");  background-size: cover;  height: 120vh;  }
      .testMask{  
          display: none;  justify-content:center;  align-items:center;  position: absolute;  top: 0;  left: 0;  width: 100vw;  height: 100vh;  background-color: rgba(0,0,0,.3);  z-index: 100;  }
      .testContent{  width: 50%;  height: 20%;   padding: 20px;  background-color: white}
      .testBody2{ height: 100vh; overflow: hidden }
    



    打开蒙版


    
        这里是测试内容