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 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 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 cookie名使用点号(句号)会被转换
2014/10/23 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
JS 对象介绍
2010/01/20 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Series和DataFrame使用简单入门
2019/11/13 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
如何让Java程序执行效率更高
2014/06/25 面试题
清明节演讲稿
2014/05/27 职场文书
创先争优宣传标语
2014/10/08 职场文书
三方股东合作协议书
2014/10/28 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
入党心得体会
2019/06/20 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
mysql创建存储过程及函数详解
2021/12/04 MySQL
Python语言内置数据类型
2022/02/24 Python