Javascript Event(事件)的传播与冒泡


Posted in Javascript onJanuary 23, 2017

特性说明和原理图:

Javascript Event(事件)的传播与冒泡

  • 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡
  • 标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8-用e.cancelBubble属性来阻冒泡,注意ie9不支持cancelBubble属性(设置后不生效),但chrome、safari、opera、firefox都支持cancelBubble属性。
  • Ie8-用attachEvent为dom元素添加一个事件,但必须在事件名前加上on,此类事件只能在元素的冒泡阶段。
  • stopPropagatin()方法用于阻止事件的传播,如果设置在捕获阶段,则目标和冒泡阶段不会被执行;
  • cancelBubble属性只能阻止冒泡阶段,对捕获和目标阶段的事件不能阻止
  • preventDefault()和window.event.returnValue用于标准浏览器和ie9+,都可以阻止默认事件。ie8-可以用returnValue,preventDefault()。

示例代码(ie8-示例不提供)

html代码

<body class="body" > 
 <div class="log"></div>
 <input type="text" id="inTxt" name="intxt" />
<div class="wrap">
 <div class="cont">
  <button type="button" class="button" id="btn">按钮</button>
  <select name="stopType" id="stopType">
    <option value="1">StopPropagation</option>
    <option value="2">cancelBubble</option>
  </select>
  <button type="button" class="button" id="btnReject">cont阻止捕获或冒泡</button>
 </div>
</div>
</body>

层级关系:body->wrap->cont->button,可以对照上面的原理

Js代码

$(function(){
    var $log = $('.log'), 
      $wrap = $('.wrap'),
      $cont = $('.cont'),
      $btn = document.getElementById('btn'),
      $stopType = $('#stopType'),
      $body = $('body'),
      $inTxt = $('#inTxt'),
      $btnReject = $('#btnReject');
    var ePhase = ["","捕获","目标","冒泡"]
    var setBorderColor = function( $dom, color, time,event){
      $dom = $($dom);
      $log.html($log.html() + $dom.attr('class') + '[' + ePhase[event.eventPhase] + ']' + '<br/>')
      var timeIndex = window.setTimeout(function(){   
      $dom.css({
        'borderColor': color,
        'borderWidth': '4px'
      });
      }, time);
    }  
    //捕获
    $body[0].addEventListener('click',function(event){ 
      $log.html($log.html() + "-------------------<br>");
      setBorderColor($body,'#0866ff ',0,event);
    },true);  
    $wrap[0].addEventListener('click',function(event){
      setBorderColor($wrap,'yellow',2000,event); 
    },true);
    $cont[0].addEventListener('click',function(event){
      event = event || window.event;
      if( $stopType.val() == '1' ){
        event.stopPropagation();
      }else{
        event.cancelBubble = true;
      }
      setBorderColor($cont,'green',1000,event);  
    },true); 
    $btn.addEventListener('click', function(event){ 
      setBorderColor($btn,'red',0,event);
    },true);
    $btnReject[0].addEventListener('click',function(event){ 
      setBorderColor($btnReject,'gray ',0,event);
    },true);
    //冒泡
    $body[0].addEventListener('click',function(event){
      setBorderColor($body,'#0866ff ',0,event);
    },false); 
    $wrap[0].addEventListener('click',function(event){
      setBorderColor($wrap,'yellow',2000,event); 
    },false); 
    $cont[0].addEventListener('click',function(event){
      setBorderColor($cont,'green',1000,event);  
    },false); 
    $btn.addEventListener('click', function(event){ 
      setBorderColor($btn,'red',0,event);
    },false);
    $btnReject[0].addEventListener('click',function(event){ 
      setBorderColor($btnReject,'gray ',0,event);
    },false);
    //阻止默认事件
    $inTxt.keypress(function(event){
      //event.preventDefault(); 
      window.event.returnValue = false;
      $body.append( String.fromCharCode( event.keyCode ));
    });
  });
  1. 实现一个完整的event流的Demo
  2. 在cont的捕获事件处有阻止事件传播的代码
  3. 阻止默认事件只用于验证

效果图

Javascript Event(事件)的传播与冒泡

应用场景

  • 捕获阶段的事件应用场景较少,一般情况下都应用在目标和冒泡阶段。
  • 现阶段w3c的标准事件已普遍受支持,如果不兼容ie8-浏览器可以废弃一些兼容性代码。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery 全局AJAX事件使用代码
Nov 05 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
vue组件的写法汇总
Apr 12 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
JavaScript中变量提升机制示例详解
Dec 27 Javascript
js选项卡的制作方法
Jan 23 #Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 #Javascript
详解javascript中对数据格式化的思考
Jan 23 #Javascript
JavaScript 栈的详解及实例代码
Jan 22 #Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 #Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 #Javascript
JavaScript 事件对内存和性能的影响
Jan 22 #Javascript
You might like
PHP 高级课程笔记 面向对象
2009/06/21 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
工程招投标邀请书
2014/01/26 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书