浅谈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 相关文章推荐
取得父标签
Nov 14 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
深入理解js generator数据类型
Aug 16 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
如何让vue长列表快速加载
Mar 29 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高自定义性安全验证码代码
2011/11/27 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
python3中dict(字典)的使用方法示例
2017/03/22 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
详解pandas使用drop_duplicates去除DataFrame重复项参数
2019/08/01 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Django在Model保存前记录日志实例
2020/05/14 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
毕业生自我鉴定范文
2013/11/08 职场文书
服装创业计划书范文
2014/02/05 职场文书
优秀员工推荐信
2014/05/10 职场文书
工地标语大全
2014/06/18 职场文书
场地使用证明模板
2014/10/25 职场文书
植物园观后感
2015/06/11 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫