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 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
js实现左右轮播图
Jan 09 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
村委会主任先进事迹
2014/01/15 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
认购协议书范本
2014/04/22 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js
Docker下安装Oracle19c
2022/04/13 Servers
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android