蝙蝠岛资源网

javascript事件的传播基础实例讲解(35)
网络编程 2025/10/31 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

本文实例为大家分享了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>

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

标签：
js,事件传播
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“javascript事件的传播基础实例讲解(35)”

暂无javascript事件的传播基础实例讲解(35)的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com