浅谈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代码
Mar 06 Javascript
JavaScript 函数调用规则
Sep 14 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
vue实现商城购物车功能
Nov 27 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
php7 新增功能实例总结
2020/05/25 PHP
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
深入理解python对json的操作总结
2017/01/05 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python线程信号量semaphore使用解析
2019/11/30 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
优秀毕业生推荐信范文
2014/03/07 职场文书
2014年工会工作总结
2014/11/12 职场文书
会议接待欢迎词范文
2015/01/26 职场文书