javascript事件的传播基础实例讲解(35)


Posted in Javascript onFebruary 14, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 #Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 #Javascript
js基于myFocus实现轮播图效果
Feb 14 #Javascript
javascript 单例模式详解及简单实例
Feb 14 #Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 #Javascript
微信小程序 弹幕功能简单实例
Feb 14 #Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 #Javascript
You might like
PHP+DBM的同学录程序(2)
2006/10/09 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
MSN消息提示类
2006/09/05 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
python验证码识别的实例详解
2016/09/09 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
pyhton列表转换为数组的实例
2018/04/04 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
python中os包的用法
2020/06/01 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
机电工程学生自荐信范文
2013/12/07 职场文书
农村婚礼证婚词
2014/01/08 职场文书
批评与自我批评材料
2014/02/15 职场文书
高一学生期末评语
2014/04/25 职场文书
新手上路标语
2014/06/20 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android