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 上传图片预览问题
Dec 06 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
Python中super函数的用法
2017/11/17 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
pandas中的series数据类型详解
2019/07/06 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
法学个人求职信范文
2014/01/27 职场文书
职工运动会邀请函
2014/02/02 职场文书
大学运动会入场词
2014/02/22 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
广告语设计及教案
2014/03/21 职场文书
跑出一片天观后感
2015/06/08 职场文书
文书工作总结(范文)
2019/07/11 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript