详解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 兼容鼠标滚轮事件
Apr 07 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
原生js实现放大镜效果
Jan 11 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
js实现随机点名功能
Dec 23 Javascript
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的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
python中__call__方法示例分析
2014/10/11 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
python导入模块交叉引用的方法
2019/01/19 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
如何用python处理excel表格
2020/06/09 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
《晏子使楚》教学反思
2014/02/08 职场文书
优秀家长自荐材料
2014/08/26 职场文书
工作感言一句话
2015/08/01 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript