详解javascript事件冒泡


Posted in Javascript onJanuary 09, 2016

事件是javascript中的核心内容之一,在对事件的应用中不可避免的要涉及到一个重要的概念,那就是事件冒泡,在介绍事件冒泡之前,先介绍一下另一个重要的概念事件流:
一.什么是事件流:
文档对象模型(DOM)是一个树形结构,可以形象的用下图表示。

详解javascript事件冒泡

如果一个html元素触发事件,那么这个事件就会在DOM树中的触发节点和根节点之间按照一定的顺序传播,所有经过的节点都会接收到被触发的事件,这个传播过程被称之为事件流。按照事件的传播顺序,可以将其分为两类,一种是事件冒泡,一种是事件捕获,这里就涉及到本章要介绍的主题了:
1.事件冒泡:
所谓的时间冒泡就是当一个元素触发一个事件,事件会像是水泡一样,从触发元素向它的所有父节点传播,一直到根节点都会接收到此事件,如果父元素中注册了相应的事件处理函数,那么尽管事件在子节点触发的,在父元素上注册的事件处理函数同样会被触发。例如在上面图示中,如果触发a元素的onclick事件,那么它的父元素p、document和widow都会接收到此事件,并且如果在相应的父元素注册有时间处理函数,那么此事件处理函数将会执行,看一段代码实例:

<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
 var table=document.getElementById("mytable");
 table.onclick=function(e){
 var event=e||window.event;
 target=event.srcElement||event.target;
 alert(target.innerHTML);
 }
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
 <td>三水点靠木</td>
 <td>三水点靠木</td>
 <td>三水点靠木</td>
</tr>
<tr>
 <td>三水点靠木</td>
 <td>三水点靠木</td>
 <td>三水点靠木</td>
</tr>
<tr>
 <td>三水点靠木</td>
 <td>三水点靠木</td>
 <td>三水点靠木</td>
</tr>
</table>
</body>
</html>

以上代码的目的是,当点击相应的单元格的时候就会弹出对应单元格中的内容。但是在上面的实现中并不是为每一个单元格注册onclick事件处理函数,而是将onclick事件处理函数注册于单元格的父元素table上,当点击单元格的时候会触发onclick事件,事件还会从从事件对象向上传播,而table元素恰好有注册的onclick事件处理函数,这个时候就会执行此处理函数,当然这里会设置到传递事件对象参数的问题。所有的浏览器都支持事件冒泡。二.事件捕获:
事件捕获和事件冒泡恰好相反,当点击一个元素的时候,事件传播的方向是从根元素到触发元素,IE浏览器并不支持,为了跨浏览器支持,所以默认情况下一般都是使用冒泡型事件处理模型。
2.javascript阻止事件冒泡代码
事件冒泡在某些场景非常的有用,但是有时候也是必须要阻止,下面是一段能够兼容所有主流浏览器的阻止事件冒泡的实例代码。
代码实例:

function stopBubble(e) 
{ 
 if(e&&e.stopPropagation) 
 { 
 e.stopPropagation(); 
 } 
 else
 { 
 window.event.cancelBubble=true; 
 } 
}

以上代码可以阻止事件冒泡,下面对代码做一下简单注释:
二、代码注释:

  • 1.function stopBubble(e) {},此函数用来阻止事件冒泡,参数是个事件对象。
  • 2. if(e&&e.stopPropagation){e.stopPropagation();},判断是否支持stopPropagation,如果支持就使用e.stopPropagation()。stopPropagation()函数IE10和IE10以下浏览器不支持。
  • 3.window.event.cancelBubble=true,当前IE浏览器使用这个可以阻止事件冒泡。

以上就是关于javascript事件冒泡的详细介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 表单规则集合对象
Jul 21 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
Vuex 入门教程
Jan 10 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
js父页面中使用子页面的方法
Jan 09 #Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 #Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 #Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 #Javascript
javascript跑马灯抽奖实例讲解
Apr 17 #Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 #Javascript
javascript返回顶部的按钮实现方法
Jan 09 #Javascript
You might like
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
wxPython的安装与使用教程
2018/08/31 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
保送生自荐信范文
2013/10/06 职场文书
零件设计自荐信范文
2013/11/27 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
2014年财务经理工作总结
2014/12/08 职场文书