浅谈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 相关文章推荐
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
微信小程序实现刷脸登录
May 25 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
企业给企业的表扬信
2014/01/13 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
给领导的感谢信范文
2015/01/23 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL