浅谈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的写法基础分析
Jan 17 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 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 minixml详解
2008/07/19 PHP
php email邮箱正则
2008/10/08 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
js 对象是否存在判断
2009/07/15 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
jquery validate demo 基础
2015/10/29 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
vue router 组件的高级应用实例代码
2019/04/08 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
python简单获取数组元素个数的方法
2015/07/13 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
python实现电子产品商店
2019/02/26 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
python 下划线的不同用法
2020/10/24 Python
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
大学在校生求职信范文
2013/11/21 职场文书
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
论文评语大全
2014/04/29 职场文书
学校就业推荐信范文
2014/05/19 职场文书
在职员工证明书
2014/09/19 职场文书
机关职员工作检讨书
2014/10/23 职场文书
2015年试用期工作总结
2014/12/12 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书