JS事件冒泡

冒泡

之所以称之为冒泡，其实特点就类似于一个冒泡的阶段。泡泡从底层一直到顶层

在dom树中，即为从dom底层层层传递到达dom的根节点。

示例

<div id="father">
  <button id="btn">点我</button>
</div>
<script>
  var father=document.getElementById("father");
  var btn=document.getElementById("btn");
  btn.onclick=function (event) {
    alert("btn");
  };
  father.onclick=function () {
    alert("点了father");
  };
  document.onclick = function () {
    alert("document")
  }
</script>

代码结果

由结果可见：
1、按钮被点击后，弹框分别弹出“btn”、“father”、“document”

2、当document区域被点击后，只弹出“document”

分析

1、由于button在father内、而father在document内，所以当按钮被点击后，即点击事件触发后，father和document都接收到了点击的这个事件。点击事件传递到document。从底传递到根。

搞笑来说就是：button是儿子、father为父亲、document此处为爷爷。当儿子打了别人，父亲知道这个事情后，爷爷也知道了。打架的这件事层层汇报着。

2、当document被点击后，泡泡已经到了根节点

也就是爷爷是长辈，事情最终汇报到爷爷那。爷爷是处理事情的最后一把手，爷爷说怎么处理就怎么处理。

阻止事件冒泡

在事件函数中加上阻止冒泡的代码

考虑到兼容性问题所以这样写

  if(event&&event.stopPropagation){//如果event存在且有stop方法
        event.stopPropagation();
      }else
        event.cancelBubble();

加上后的结果

儿子打架这件事的传递就被阻止了，可理解成儿子自己解决了吧，不敢说。

蒙版特效

针对事件冒泡，可以实现一个蒙版特效

特效图

就只是展示原理。。没有加其他的内容

HTML

<button id="btn">登陆</button>
<div id="panel"></div>
<div id="login"></div>

CSS

*{
      margin: 0;
      padding: 0;
    }
    html,body{
      width: 100%;
      height: 3000px;
    }
    #panel{
      width: 100%;
      height: 100%;
      background-color: #cccccc;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }
    #login{
      width: 300px;
      height: 300px;
      background-color: blue;
      border-radius: 5px;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -150px;
      display: none;
    }

事件分析

点击按钮后（onclick）出现灰蓝区域，滚动条隐藏。

点击（onclick）除去蓝色区域之外的任何地方地方，灰蓝区域回到起始的隐藏状态

特效分析

作为一个初学者，起初会觉得，嗯这不挺简单的嘛。只要设置document点击事件和button的点击事件然后设置相应的样式就行嘛。
其实是大错特错了。

大致思路：

1、获取需要的标签
2、拿到当前点击处的id名称
3、判断，点击处是否属于蓝色区域（使用event事件对象）

错误代码：

//1、监听按钮的点击
    $("btn").onclick = function (event) {
      //1.1显示面板和蒙版
      $("panel").style.display="block";
      $("login").style.display="block";
      //1.2隐藏滚动条
      document.body.style.overflow="hidden";
      console.log("btn");
    }
    document.onclick=function (event) {
      var e=event||window.event;
      //2、获取标签元素
      var targetId=e.target?e.target.id:e.srcElement.id;//获取id
      //2.2判断
      if(targetId!=="login"){
        //点了旁边就隐藏，所以不是login的地方点了以后蒙版就要隐藏
        
        //隐藏面板和蒙版
        $("panel").style.display="none";
        $("login").style.display="none";
        //显示滚动条
        document.body.style.overflow="auto";
      }
      console.log("document");
    }

最终效果：点击button，展示了document.onclick函数内容

原因：事件冒泡原理

当button被点击时，本应该执行的是button点击函数中的内容。但是由于事件冒泡机制，在button点击事件被触发后，经过传递，document也接收到了，所以最终执行的是document.onclick函数中的内容

我们初始是希望，点击了button后，执行button点击函数的内容。所以在这里我们需要加上阻止冒泡的代码：

  if(event&&event.stopPropagation){//如果event存在且有stop方法
        event.stopPropagation();
      }else
        event.cancelBubble();

这样的话，在点击button后也只会执行button点击函数中的内容。

而不会进行事件传递，从而实现这个简单的蒙版特效