冒泡现象和阻止事件冒泡 1

冒泡现象:触发某元素的某个时间触发其父级元素的对应时间，从元素本身向上冒泡到Dom顶层

事件冒泡与阻止事件冒泡

 

<head lang="en">
    <meta charset="UTF-8">
    <title> 冒泡现象</title>
    <style>
        *{
            margin: 0;
            padding: 0;}
        #div1{
            display: none;
            width: 100px;
            height: 100px;background: yellowgreen }

    </style>
</head>
<body>
    <input type="button" value="btn" id="bt1"/>
    <div id="div1">
</div>
<script>
  /*  冒泡现象:点击文档上的按钮时，会触发事件点击文档document */
/*    window.onload=function(){
        var bt=document.getElementById("bt1");
        var div1=document.getElementById("div1");
        bt.onclick=function(){  //冒泡机制： 点击bt时，触发bt点击事件 - 向上冒泡，触发事件点击document
            //所以这里并不会显示div，因为事件冒泡机制触发事件点击document会让这个div的display属性始终为none
            div1.style.display='block';
        }
        document.onclick=function(){
            div1.style.display='none';
        }
    }*/

/* 阻止事件冒泡:实现效果点击按钮div显示,点击文档div消失 */
  window.onload=function(){
      var bt=document.getElementById("bt1");
      var div1=document.getElementById("div1");
      bt.onclick=function( ev){  //冒泡机制： 点击bt时，触发bt点击事件 - 向上冒泡，触发事件点击document
          //所以这里并不会显示，因为事件冒泡机制触发事件点击document会让这个div的display属性始终为none
          div1.style.display='block';
          var ev= ev||window.event ;
          ev.stopPropagation(); // 阻止事件冒泡: - 点击按钮时阻止冒泡触发上层事件（这里：点击文档事件）
      }
      document.onclick=function(){
          div1.style.display='none';
      }
  }
</script>

　　

posted @ 2016-08-23 17:17  July_Zheng  阅读(177)  评论(0)  编辑  收藏  举报