浅谈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入门之事件、cookie、定时等
Oct 21 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 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/08/15 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
网上抓的一个特效
2007/05/11 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
python 创建一维的0向量实例
2019/12/02 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
文明家庭先进事迹材料
2014/05/14 职场文书
个人授权委托书范文
2014/09/21 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL