详解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 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 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新手上路(十)
2006/10/09 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
使用graphics.py实现2048小游戏
2015/03/10 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python字符串切片操作知识详解
2016/03/28 Python
Python处理Excel文件实例代码
2017/06/20 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
opencv实现图像平移效果
2021/03/24 Python
啤酒销售实习自我鉴定
2013/09/24 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
认识实习感想
2015/08/10 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android