js事件机制----捕获与冒泡机制实例分析


Posted in Javascript onMay 22, 2020

本文实例讲述了js事件机制----捕获与冒泡机制。分享给大家供大家参考,具体如下:

先从事件绑定机制说起, 事件绑定机制通过绑定方法addEventListener()实现,

语法格式如下:

element.addEventListener(event, function, useCapture)

参数值

参数 描述
event 必须。字符串,指定事件名。注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册。
function 必须。指定要事件触发时执行的函数。  当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

我们可以看到第三个参数是布尔值, true表示在捕获阶段执行, 而false指在冒泡阶段执行

所以什么是 捕获和冒泡?

捕获(capture)和冒泡(bubble)是事件传播过程中的两个概念, 比如用户单击某个元素, 但由于元素处于父元素内, 该父元素又处于document对象中, document对象又处于window对象中, 因此该单击事件实际发生在该元素, 父元素, document, window对象上, 而事件传播过程就是浏览器决定依次触发哪个对象的事件处理函数的过程.

DOM事件模型将事件传播过程分为两个阶段: 捕获阶段和冒泡阶段

在事件捕获阶段, 事件从最顶级的父元素逐层向内传递,

在冒泡阶段, 事件从事件发生的直接元素 , 逐层向父元素传递

js事件机制----捕获与冒泡机制实例分析

这里举个简单的例子:

点击孙子元素, 给body中的元素都添加点击事件并输出触发事件的对象id:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <div id="父级">
 <div id="儿子">
  <div id="孙子" style="width:100px; height:100px; background-color:yellow">
  </div>
 </div>
 </div>
</body>
<script type="text/javascript">
 var a = document.getElementById('父级'),
 b = document.getElementById('儿子'),
 c = document.getElementById('孙子');
 a.addEventListener("click",show, true);
 b.addEventListener("click",show, true);
 c.addEventListener("click",show, true);
 console.log("前3为捕获,后三个为冒泡");
 a.addEventListener("click",show, false);
 b.addEventListener("click",show, false);
 c.addEventListener("click",show, false);
 function show(even){ console.log(this.id); }
</script>
</html>

js事件机制----捕获与冒泡机制实例分析

其中两条孙子输出相同被折叠了, 可以看到前三个是以捕获顺序, 第三个参数为true, 顺序是从父亲到孙子

后三个为false意思是冒泡顺序, 顺序是孙子到父级,即从内到外

实际上捕获和冒泡时最外层和的元素并不是父级div,

捕获时实际上是:

document-->html-->body-->父级div-->儿子div-->孙子div

冒泡时相反, 只不过body及以上没添加事件并输出, 所以在例子中没显现出来

所以用冒泡还是捕获?

对于事件代理来说,在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分,但是由于事件冒泡的事件流模型被所有主流的浏览器兼容,从兼容性角度来说还是建议大家使用事件冒泡模型。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
web 页面分页打印的实现
Jun 22 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 #Javascript
详解如何修改 node_modules 里的文件
May 22 #Javascript
Node.js API详解之 readline模块用法详解
May 22 #Javascript
vue+canvas实现移动端手写签名
May 21 #Javascript
基于canvas实现手写签名(vue)
May 21 #Javascript
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
js cavans实现静态滚动弹幕
May 21 #Javascript
You might like
php日历[测试通过]
2008/03/27 PHP
PHP可变函数的使用详解
2013/06/14 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
django 环境变量配置过程详解
2019/08/06 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Python csv模块使用方法代码实例
2019/08/29 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
宿舍违规用电检讨书
2014/02/16 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
减负增效提质方案
2014/05/23 职场文书
企业安全生产标语
2014/06/06 职场文书
领导班子整改措施
2014/10/24 职场文书
给医院的感谢信
2015/01/21 职场文书
大学毕业生自我评价
2015/03/02 职场文书
新年寄语2016
2015/08/17 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
Nginx配置Https安全认证的实现
2021/05/26 Servers
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
详解python网络进程
2021/06/15 Python