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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
一个Python最简单的接口自动化框架
2018/01/02 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
海飞丝广告词
2014/03/20 职场文书
软件项目实施计划书
2014/05/02 职场文书
文明班级建设方案
2014/05/15 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
暑假生活随笔
2015/08/15 职场文书
丧事答谢词大全
2015/09/30 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python