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

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <script type="text/javascript">
     8 window.onload=function()
     9 {
    10 /*
    11 事件的冒泡(Bubble)
    12 所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发是,其祖先元素的_(:з」∠)_
    13 相同事件也会被触发
    14 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
    15 */
    16  var span=document.getElementById("span");
    17  span.onclick=function(event){
    18  event=event||window.event;
    19  alert("span");
    20  //取消冒泡 将事件对象的cancelBubble设置为true,即可取消冒泡
    21  event.cancelBubble=true;
    22  };
    23  var box1=document.getElementById("box1");
    24  box1.onclick=function(){
    25  alert("box1");
    26  };
    27  document.body.onclick=function(){
    28  alert("body");
    29  };
    30 };
    31   </script>
    32 <style type="text/css">
    33 #box1{
    34 width:200px;
    35 height:200px;
    36 background-color:yellowgreen;
    37 }
    38 #span{
    39 background-color:yellow;
    40 }
    41 
    42 </style>
    43 <body style="height:1000px 1000px">
    44 <div id="box1">我是box1
    45 <span id="span">我是span</span>
    46 </div>
    47 </body>
    48 </html>
  • 相关阅读:
    C语言调试示例
    Tiff格式详解(转载)
    指纹
    twitter
    baidu
    NoSuchMethodError随记
    IllegalArgumentException异常
    Springboot2.2.9接入阿里云ES(带高亮查询)
    阿里云ECS安装cnpm
    阿里云ECS安装docker
  • 原文地址:https://www.cnblogs.com/zuiaimiusi/p/11258396.html
Copyright © 2011-2022 走看看