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中的闭包浅谈
Aug 23 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
js实现右键菜单功能
Nov 28 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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异常处理Exception类
2015/12/11 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
angular动态表单制作
2018/02/23 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
Python运算符重载详解及实例代码
2017/03/07 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
python采集微信公众号文章
2018/12/20 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
软件测试题目
2013/02/27 面试题
将相和教学反思
2014/02/04 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书