浅谈javascript中的事件冒泡和事件捕获


Posted in Javascript onDecember 28, 2016

1.事件冒泡

IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。以下面的HTML 页面为例:

<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>

如果你单击了页面中的<div>元素,那么这个click 事件会按照如下顺序传播:

(1) <div>

(2) <body>

(3) <html>

(4) document

也就是说,click 事件首先在<div>元素上发生,而这个元素就是我们单击的元素。然后,click事件沿DOM树向上传播,在每一级节点上都会发生,直至传播到document 对象。图13-1 展示了事件冒泡的过程。

浅谈javascript中的事件冒泡和事件捕获

所有现代浏览器都支持事件冒泡,但在具体实现上还是有一些差别。IE5.5 及更早版本中的事件冒泡会跳过<html>元素(从<body>直接跳到document)。IE9、Firefox、Chrome 和Safari 则将事件一直冒泡到window 对象。

2.事件捕获

Netscape Communicator 团队提出的另一种事件流叫做事件捕获(event capturing)。事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。如果仍以前面的HTML 页面作为演示事件捕获的例子,那么单击<div>元素就会以下列顺序触发click 事件。

(1) document

(2) <html>

(3) <body>

(4) <div>

在事件捕获过程中,document 对象首先接收到click 事件,然后事件沿DOM 树依次向下,一直传播到事件的实际目标,即<div>元素。

浅谈javascript中的事件冒泡和事件捕获

虽然事件捕获是Netscape Communicator 唯一支持的事件流模型,但IE9、Safari、Chrome、Opera和Firefox 目前也都支持这种事件流模型。

由于老版本的浏览器不支持,因此很少有人使用事件捕获。我们也建议读者放心地使用事件冒泡,在有特殊需要时再使用事件捕获。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
JavaScript数据类型详解
Apr 01 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
bootstrap导航、选项卡实现代码
Dec 28 #Javascript
bootstrap提示标签、提示框实现代码
Dec 28 #Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 #Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 #Javascript
基于bootstrap风格的弹框插件
Dec 28 #Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 #Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 #Javascript
You might like
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
一个SQL管理员的web接口
2006/10/09 PHP
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
Python字典遍历操作实例小结
2019/03/05 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
计算机应用专业推荐信
2013/11/13 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
社会保险接收函
2014/01/12 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
工程质量承诺书
2014/03/27 职场文书
文体活动总结
2015/02/04 职场文书
父亲去世追悼词
2015/06/23 职场文书
python实现简单反弹球游戏
2021/04/12 Python