javascript 中事件冒泡和事件捕获机制的详解


Posted in Javascript onSeptember 01, 2017

javascript 中事件冒泡和事件捕获机制的详解

二者作用:描述事件触发时序问题

事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件---由外到内

事件冒泡:自下而上的去触发事件---由内到外

绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获

true,事件捕获;false,事件冒泡

一般默认false,即事件冒泡

Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了 

下面是我尝试的例子:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>事件冒泡与事件捕获</title> 
  <script> 
    window.onload = function () { 
      document.getElementById("parent").addEventListener("click",function(e){ 
        alert("parent事件被触发,"+this.id); 
      },true) 
      document.getElementById("child").addEventListener("click",function(e){ 
        alert("child事件被触发,"+this.id) 
      },true) 
    } 
 
  </script> 
</head> 
<body> 
<div id="parent"> 
  parent事件 
  <div id="child" class="child"> 
  child事件 
  </div> 
</div> 
</body> 
</html>

 例子里我加了第三个true,是事件捕获。

如果不加则是默认的事件冒泡,这时候事件触发时序就是自内向外

以上就是javascript 中事件冒泡和事件捕获机制的详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
Vue的Class与Style绑定的方法
Sep 01 #Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 #Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 #Javascript
Angularjs实现上传图片预览功能
Sep 01 #Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 #Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 #Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
You might like
Terran剧情介绍
2020/03/14 星际争霸
php 代码优化的42条建议 推荐
2009/09/25 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
javascript基本语法
2016/05/31 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
jQuery事件详解
2017/02/23 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python列表的切片实例讲解
2019/08/20 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
2014年社区植树节活动方案
2014/02/28 职场文书
产品质量保证书范本
2015/02/27 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
JavaScript 原型与原型链详情
2021/11/02 Javascript