浅谈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实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
浅谈PDF.js使用心得
Jun 07 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
vue实现购物车小案例
Sep 27 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
Javascript实现单选框效果
Dec 09 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
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
js跳转页面方法实现汇总
2014/02/11 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
解决python线程卡死的问题
2019/02/18 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
python实现字符串和数字拼接
2020/03/02 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
计划生育标语
2014/06/23 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
农业生产宣传标语
2014/10/08 职场文书
行政文员岗位职责
2015/02/04 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
《迟到》教学反思
2016/02/24 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
使用Python开发冰球小游戏
2022/04/30 Python