浅谈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 相关文章推荐
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
Python识别处理照片中的条形码
2020/11/16 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
如何写一个自定义标签
2012/12/28 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
上课睡觉检讨书
2014/01/28 职场文书
运动会邀请函范文
2014/02/06 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
青春寄语大全
2014/04/09 职场文书
音乐教师求职信
2014/06/28 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
公司与个人合作协议书
2016/03/19 职场文书