zoukankan      html  css  js  c++  java
  • 事件的冒泡(Bubble)

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
       /*
        * 事件的冒泡(Bubble)
        *   -所谓的事件冒泡指的是事件的向上传导,
        *        当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发。
        *   - 在开发中冒泡是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
        *
        */
       window.onload=function(){
        //为s1绑定一个单击响应函数
        var s1 = document.getElementById("s1");
        s1.onclick =function (event){
         event=event||window.event;
         alert("我是span标签的单击响应函数");
         
         
         //取消冒泡
         //可以将事件对象的cancelBubble设置为true,即可取消冒泡;
         event.cancelBubble=true;
        }
        //为box1绑定一个单击响应函数
        var box1 = document.getElementById("box1");
        box1.onclick =function (){
         alert("我是div的单击响应函数")
        }
        
        //为body绑定一个单击响应函数
        document.body.onclick =function (){
         alert("我是body的单击响应函数")
        }
        
       }
      </script>
      <style type="text/css">
       #box1{
         200px;
        height: 200px;
        background-color: red;
       }
       #s1{
        background-color: yellowgreen;
       }
      </style>
     </head>
     
     <body>
      <div id="box1">
       
       <span id="s1">我是span标签</span>
      </div>
     </body>
    </html>

  • 相关阅读:
    汇总:unity中弹道计算和击中移动目标计算方法
    Unity3D游戏开发之SQLite让数据库开发更简单
    3DMAX可编辑多边形常用命令-桥
    3dmax沿立方体边扩展出面
    3dmax切割平行线
    Litjson
    使用 Unity 3D 开发游戏的架构设计难点
    Unity T4M 中文讲解
    unity5.5打包
    颜色模式
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/12757257.html
Copyright © 2011-2022 走看看