DDR爱好者之家

javascript事件的传播基础实例讲解(35)
站长资源 2024/11/28 佚名
50 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了js事件的传播，供大家参考，具体内容如下

<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <style type="text/css"> 
   #box1{ 
    width: 300px; 
    height: 300px; 
    background-color: deepskyblue; 
   } 
    
   #box2{ 
    width: 200px; 
    height: 200px; 
    background-color: cadetblue; 
   } 
    
   #box3{ 
    width: 100px; 
    height: 100px; 
    background-color: chocolate; 
   } 
    
  </style> 
   
  <script type="text/javascript"> 
   
   function bind(obj , eventStr , callback){ 
     
    if(obj.addEventListener){ 
     //如果是正常浏览器 
     obj.addEventListener(eventStr , callback , false); 
    }else{ 
     //IE8 
     obj.attachEvent("on"+eventStr , function(){ 
      callback.call(obj); 
     }); 
    } 
   } 
    
   window.onload = function(){ 
     
    /* 
     * 事件的传播 
     * - 关于事件的传播微软和网景公司有着不同的理解 
     * - 微软公司，认为事件应该是从后代元素向祖先元素传播，即从里向外传播，也就是我们所谓事件的冒泡 
     * - 网景公司，认为事件应该是从祖先元素向后代元素传播，即从外向里传播，这一阶段我们称为事件的捕获 
     * - W3C综合了两个公司的方案,将事件的传播分成了三个阶段 
     *  1.捕获阶段 
     *   - 事件从最外层的元素（document），向目标元素进行事件的捕获 
     *   - 此阶段默认不会触发事件 
     *  2.目标阶段 
     *   - 目标指的是触发事件的元素，捕获到目标元素则捕获阶段停止 
     *  3.冒泡阶段 
     *   - 事件从目标元素向祖先元素中冒泡，此时开始触发事件 
     *   - 默认事件都是在冒泡阶段执行的 
     * 
     * - 事件都是默认在冒泡阶段执行的，一般不需要在捕获阶段触发事件， 
     *  如果希望在捕获阶段执行事件，则需要将addEventListener()的第三个参数修改为true 
     * 
     * - IE8及以下的浏览器没有捕获阶段，也不能设置在捕获阶段触发事件 
     */ 
     
    //分别为三个div绑定单击响应函数 
    var box1 = document.getElementById("box1"); 
    var box2 = document.getElementById("box2"); 
    var box3 = document.getElementById("box3"); 
     
    bind(box1,"click",function(){ 
     alert(1); 
    }) 
     
    bind(box2,"click",function(){ 
     alert(2); 
    }) 
     
    bind(box3,"click",function(){ 
     alert(3); 
    }) 
     
   }; 
    
    
  </script> 
 </head> 
 <body> 
   
  <div id="box1"> 
   <div id="box2"> 
    <div id="box3"></div> 
   </div> 
  </div> 
   
 </body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米