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 相关文章推荐
javascript学习笔记(五)正则表达式
Apr 08 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
js实现登录验证码
Dec 22 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
js实现搜索提示框效果
Sep 05 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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
jquery获取节点名称
2015/04/26 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python实现在pickling的时候压缩的方法
2014/09/25 Python
python中map()函数的使用方法示例
2017/09/29 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
毕业生护理专业个人求职信范文
2014/01/04 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
如何写自我鉴定
2014/03/19 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
教师个人自我评价
2015/03/04 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
MySQL七大JOIN的具体使用
2022/02/28 MySQL