JavaScript 事件冒泡简介及应用


Posted in Javascript onJanuary 11, 2010

一、什么是事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,直至到中央法院,最终使你的案件得以处理。

二、事件冒泡有什么作用
(1)事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。

【集中处理例子】

<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> 
<div id="inSide" style="width:100px; height:100px; background:#CCC"></div> 
</div> 
<script type="text/javascript"> 
//本例子只在外面盒子定义了处理方法,而这个方法一样可以捕获到子元素点击行为并处理它。假设有成千上万子元素要处理,难道我们要为每个元素加“onclick="eventHandle(event)"”?显然没有这种集中处理的方法来的简单,同时它的性能也是更高的。 
function eventHandle(e) 
{ 
var e=e||window.event; 
var obj=e.target||e.srcElement; 
alert(obj.id+' was click') 
} 
</script>

(2)让不同的对象同时捕获同一事件,并调用自己的专属处理程序做自己的事情,就像老板一下命令,各自员工做自己岗位上的工作去了。

【同时捕获同一事件例子】

<div onclick="outSideWork()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> 
<div onclick="inSideWork()" id="inSide" style="width:100px; height:100px; background:#CCC"></div> 
</div> 
<script type="text/javascript"> 
function outSideWork() 
{ 
alert('My name is outSide,I was working...'); 
} function inSideWork() 
{ 
alert('My name is inSide,I was working...'); 
} 
//因为下面程序自动激活单击事件,有些浏览器不允许,所以请单击灰色盒子,从这里开始下命令,这样因为冒泡的原因,黑色大盒子也会收到单击事件,并调用了自己的处理程序。如果还有更多盒子嵌套,一样道理。 
/* 
function bossOrder() 
{ 
document.getElmentById('inSide').click(); 
} 
bossOrder(); 
*/ 
</script>

三、需要注意什么
●事件捕获其实有三种方式,事件冒泡只是其中的一种:(1)IE从里到外(inside→outside)的冒泡型事件。(2)Netscape4.0从外到里(outside→inside)的捕获型事件。(3)DOM事件流,先从外到里,再从里到外回到原点(outside→inside→outside)的事件捕获方法(似乎对象将触发两次事件处理,这有什么作用?鄙人不懂!)。

●不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload。

●事件捕获方式在不同浏览器,甚至同种浏览器的不同版本中是有所区别的。如Netscape4.0采用捕获型事件解决方案,其它多数浏览器则支持冒泡型事件解决方案,另外DOM事件流还支持文本节点事件冒泡。

●事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在IE6中HTML是接收事件冒泡的,另外大部分浏览器将冒泡延续到window对象,即……body→documen→window。

●阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据,这种行为无须我们写程序定制。

四、阻止事件冒泡
通常情况下我们都是一步到位,明确自己的事件触发源,并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序,即我们明确最精准目标,这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解,我们知道程序将做多较多额外的事情,这必然增大程序开销。还有一个重要的问题是:事件冒泡处理可能会激活我们本来不想激活的事件,导致程序错乱,甚至无从下手调试,这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时,我们要阻止事件冒泡。

【不想激活的事件被激活例子】

<div onclick="openWin('http://www.baidu.com')" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> 
<div onclick="openWin('http://www.google.com')" id="inSide" style="width:100px; height:100px; background:#CCC"></div> 
</div> <script type="text/javascript"> 
//本例你实际希望点击灰色盒子打开google首页,而点击黑色盒子打开baidu首页,但结果你点击灰色盒子的时候,却是同时打开了两个网页。其实在实际设计中较少遇到此问题,你可能会想如果我在页面不同DOM深处安置了不同的按钮或链接,深层处的事件触发会不会波及顶层的按钮呢?不会,因为按钮不能形成嵌套关系。 
function openWin(url) 
{ 
window.open(url); 
} 
</script>

下面是本人在网上抄的一个方法,把这个方法放在精准目标对象处理程序结尾,本事件触发处理结束后,事件将不在进行冒泡处理。

【阻止事件冒泡例子】

<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"> 
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div> 
</div> 
<script type="text/javascript"> 
//阻止事件冒泡后,你点击灰色盒子,整个过程只弹一次对话框了(注意与默认情况对比) 
function showMsg(obj,e) 
{ 
alert(obj.id); 
stopBubble(e) 
} //阻止事件冒泡函数 
function stopBubble(e) 
{ 
if (e && e.stopPropagation) 
e.stopPropagation() 
else 
window.event.cancelBubble=true 
} 
</script>
Javascript 相关文章推荐
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
Javascript 读书笔记索引贴
Jan 11 #Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 #Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 #Javascript
Javascript学习笔记7 原型链的原理
Jan 11 #Javascript
Javascript学习笔记6 prototype的提出
Jan 11 #Javascript
Javascript学习笔记5 类和对象
Jan 11 #Javascript
Javascript学习笔记4 Eval函数
Jan 11 #Javascript
You might like
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
javascript 必知必会之closure
2009/09/21 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
python实现将内容分行输出
2015/11/05 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python实现名片管理系统
2018/11/29 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
详解python的super()的作用和原理
2020/10/29 Python
师范生实习个人的自我评价
2013/09/28 职场文书
先进个人获奖感言
2014/01/24 职场文书
小学生优秀评语大全
2014/04/22 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
语文复习计划
2015/01/19 职场文书
学习与创新自我评价
2015/03/09 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
如何利用pygame实现打飞机小游戏
2021/05/30 Python
python常见的占位符总结及用法
2021/07/02 Python