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 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
Angular 路由route实例代码
Jul 12 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
搭建vue开发环境
Jul 19 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
es6 for循环中let和var区别详解
Jan 12 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
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
jQuery实现聊天对话框
2020/02/08 jQuery
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
Python Deque 模块使用详解
2014/07/04 Python
python计算N天之后日期的方法
2015/03/31 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python模块导入的方法
2019/10/24 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Keras搭建自编码器操作
2020/07/03 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
电焊工工作岗位职责
2014/02/06 职场文书
体育活动总结范文
2014/05/04 职场文书
上海世博会口号
2014/06/19 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
铁路安全反思材料
2014/12/24 职场文书
大学生团日活动总结
2015/05/06 职场文书
民事答辩状范本
2015/05/21 职场文书
2015年中秋节主持词
2015/07/30 职场文书
化工厂员工工作总结
2015/10/15 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript