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>
  • 相关阅读:
    20201022-1 每周例行报告
    Alpha发布
    每周例行报告
    20201207-总结
    20201126-1 每周例行报告
    作业要求 20201120-1 每周例行报告
    20201112-1 每周例行报告
    作业要求 20201015-3 每周例行报告
    20200924-5 四则运算试题生成,结对
    20200924-1 每周例行报告
  • 原文地址:https://www.cnblogs.com/zuiaimiusi/p/11258396.html
Copyright © 2011-2022 走看看