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圆形浮动菜单特效代码
Mar 03 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
JavaScript脚本库编写的方法
2015/12/09 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
Python中关于字符串对象的一些基础知识
2015/04/08 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Python实现一个简单的验证码程序
2017/11/03 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
Django组件cookie与session的具体使用
2019/06/05 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
浅谈Python中的模块
2020/06/10 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
小学教研工作制度
2014/01/15 职场文书
物业保安员岗位职责
2014/03/14 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
坎儿井导游词
2015/02/09 职场文书
大四学生个人总结
2015/02/15 职场文书
在校学生证明格式
2015/06/24 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
委托书范本格式
2019/04/18 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
Python max函数中key的用法及原理解析
2021/06/26 Python
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS