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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
浅析return false的正确使用
Nov 04 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
layui导出所有数据的例子
Sep 10 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清除和销毁session的方法分析
2015/03/19 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
php实现求相对时间函数
2015/06/15 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
python实现自动发送邮件
2018/06/20 Python
python使用turtle绘制分形树
2018/06/22 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
django 外键创建注意事项说明
2020/05/20 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
音乐教学反思
2014/02/02 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
听课评语大全
2014/04/30 职场文书
献爱心标语
2014/06/21 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
党校毕业心得体会
2014/09/13 职场文书
毕业设计致谢语
2015/05/14 职场文书
《植树问题》教学反思
2016/03/03 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS