JavaScript事件冒泡简介及应用
一、什么是事件冒泡
在一个对象上触发某类事件(比如单击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">// eventHandle(e) { eewindow.event; obje.targete.srcElement; alert(obj.id''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...); } 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">// 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"> showMsg(obj,e) { alert(obj.id); stopBubble(e) } //阻止事件冒泡函数function
stopBubble(e) { (e e.stopPropagation) e.stopPropagation() window.event.cancelBubble = true
</script>
JavaScript事件冒泡简介及应用的更多相关文章
- 转:JavaScript事件冒泡简介及应用
(本文转载自别处) JavaScript事件冒泡简介及应用 一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
- JavaScript事件——冒泡、捕获
本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...
- Javascript事件冒泡机制
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- javascript事件冒泡
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- 解析Javascript事件冒泡机制(转) 本文转自:http://blog.csdn.net/luanlouis/article/details/23927347
本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
- 解析Javascript事件冒泡机制(转)
本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
随机推荐
- nopcommerce里面的@Html.Widget("home_page_top") 是什么?
很多朋友在修改模板的时候看到很多类似@Html.Widget("xxx")的东西,这里简单介绍一下流程: 比如@Html.Widget("home_page_top&qu ...
- 边工作边刷题:70天一遍leetcode: day 89-1
Smallest Rectangle Enclosing Black Pixels 要点:记题:这题有两个限制条件:所有black pixel是连通的(所以可以用binary search)以及给了一 ...
- 看程序写结果(program)
看程序写结果(program) Time Limit:1000ms Memory Limit:64MB 题目描述 LYK 最近在准备 NOIP2017 的初赛,它最不擅长的就是看程序写结果了,因此它拼 ...
- 为Unity项目生成文档(一)
VS生成chm帮助文档 VS代码中使用Xml注释,并通过Sandcastle生成chm文档的文章,这几篇值得分享: 使用.NET中的XML注释(一) -- XML注释标签讲解 使用.NET中的XML注 ...
- McCall的软件质量模型
McCall等认为,特性是软件质量的反映,软件属性可用做评价准则,定量化地度量软件属性可知软件质量的优劣 McCall认为软件的质量模型应该包括 产品的修正.产品的转移,产品的运行 而产品的修正又包括 ...
- mongoVUE1.5.3 破解方法
MongoVUE是个免费软件,但超过15天后功能受限.可以通过删除以下注册表项来解除限制: [HKEY_CURRENT_USER\Software\Classes\CLSID\{B1159E65-82 ...
- f2fs解析(五)什么叫做compacted summary
f2fs中普通的summary是长这样的:每一个段的SSA block中,前半部分是这个段的SSA,然后对于HOT_DATA以及COLD_DATA段,存放是的是nat journal 和 sit jo ...
- [服务]ftp主动模式和被动模式
经常忘记这个东西.于是总结下这东西感受下这个协议. FTP连接方式 控制连接:标准端口为21,用于发送FTP命令信息 数据连接:标准端口为20,用于上传.下载数据 数据连接的建立类型: 主动模式:服务 ...
- 北京联想招聘-Android Framework高级工程师(7-10年) 加入qq 群:220486180 或者直接在此 留言咨询
Job ID #: 45038 Position Title: Android Framework高级工程师 Location: CHN-Beijing Functional Area: Resear ...
- c语言自加自减三道题
int x , y,z; x = 0; y = z = -1; x += -z ---y; printf("x=%d\n",x) x = 2 为什么? x + = -z - - ...