详解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 相关文章推荐
js中关于String对象的replace使用详解
May 24 Javascript
JS字符串截取函数实例
Dec 27 Javascript
js中小数转换整数的方法
Jan 26 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 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
如何做到多笔资料的同步
2006/10/09 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
python3.5仿微软计算器程序
2020/03/30 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
实例讲解Python爬取网页数据
2018/07/08 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
python实现计算器简易版
2020/12/17 Python
大整数数相乘的问题
2012/07/22 面试题
一份软件工程师的面试试题
2016/02/01 面试题
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
国税会议欢迎词
2014/01/16 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
公司会议开幕词
2015/01/29 职场文书
刑事撤诉申请书
2015/05/18 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
Minikube搭建Kubernetes集群
2022/03/31 Servers