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统计输入文字的个数并对其进行判断
Jan 07 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
Vue.js表单控件实践
Oct 27 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
JavaScript动态加载重复绑定问题
Apr 01 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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 文件夹删除、php清除缓存程序
2009/08/25 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
Three.js学习之网格
2016/08/10 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
python中字典dict常用操作方法实例总结
2015/04/04 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Python 如何查找特定类型文件
2020/08/17 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
银行会计职员个人的自我评价
2013/09/29 职场文书
应届生个人求职信模板
2013/11/26 职场文书
英语自荐信常用语句
2013/12/13 职场文书
空气的环保标语
2014/06/12 职场文书
党员自我对照检查材料
2014/08/19 职场文书
《花钟》教学反思
2016/02/17 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
MySQL添加索引特点及优化问题
2022/07/23 MySQL