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实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
js创建数组的简单方法
Jul 27 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
Javascript读写cookie的实例源码
Mar 16 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预定义变量使用帮助(带实例)
2013/10/30 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
使用javascript访问XML数据的实例
2006/12/27 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
Python常用模块介绍
2014/11/21 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
Python变量访问权限控制详解
2019/06/29 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
《一个小村庄的故事》教学反思
2014/04/13 职场文书
党支部特色活动方案
2014/08/20 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
2014年党建工作总结
2014/11/11 职场文书
给下属加薪申请报告
2015/05/15 职场文书
交通安全教育主题班会
2015/08/12 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS