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 相关文章推荐
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
JS提交form表单实例分析
Dec 10 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 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中显示数组与对象的实现代码
2011/04/18 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
深入探究node之Transform
2017/07/20 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python定时器实例代码
2017/11/01 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
python保留小数位的三种实现方法
2020/01/07 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
python 6种方法实现单例模式
2020/12/15 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
一个C/C++编程面试题
2013/11/10 面试题
什么是事务?为什么需要事务?
2012/01/09 面试题
语文教学感言
2014/02/06 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
全国助残日活动总结
2015/05/11 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python