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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
html中两种获取标签内的值的方法
Jun 16 jQuery
微信小程序中实现一对多发消息详解及实例代码
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获取Google机器人访问足迹的方法
2015/04/15 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
python实现名片管理系统
2018/11/29 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
《听鱼说话》教学反思
2014/02/15 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
安全教育实施方案
2014/03/02 职场文书
2014年纪委工作总结
2014/12/05 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
nginx+lua单机上万并发的实现
2021/05/31 Servers
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers