浅谈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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
vue中实现动态生成二维码的方法
Feb 21 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
第八节--访问方式
2006/11/16 PHP
php反弹shell实现代码
2009/04/22 PHP
PHP 图片水印类代码
2012/08/27 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
基于滚动条位置判断的简单实例
2017/12/14 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
python图像处理入门(一)
2019/04/04 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
python 字典套字典或列表的示例
2019/12/16 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
测控技术与仪器个人求职信范文
2013/12/30 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
学雷锋宣传标语
2014/06/25 职场文书
2014年终个人工作总结
2014/11/07 职场文书
导师工作推荐信
2015/03/27 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python