浅谈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 validate在ie8下的bug解决方法
Nov 13 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
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中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
python django集成cas验证系统
2014/07/14 Python
python基础教程之匿名函数lambda
2017/01/17 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
高中班主任评语大全
2014/04/25 职场文书
2014年校长工作总结
2014/12/11 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
上甘岭观后感
2015/06/10 职场文书
学生病假条怎么写
2015/08/17 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript