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 相关文章推荐
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 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 URL跳转代码 减少外链
2011/06/25 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
学习php开源项目的源码指南
2014/12/21 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
线程同步的方法
2016/11/23 面试题
职业规划书如何设计?
2014/01/09 职场文书
施工材料员岗位职责
2014/02/12 职场文书
广告创意求职信
2014/03/17 职场文书
文明市民先进事迹
2014/05/15 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
工作收入证明模板
2014/10/10 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
Js类的构建与继承案例详解
2021/09/15 Javascript
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫