一、什么是事件冒泡

在一个对象上触发某类事件(比如单击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事件冒泡简介及应用的更多相关文章

  1. 转:JavaScript事件冒泡简介及应用

    (本文转载自别处) JavaScript事件冒泡简介及应用   一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...

  2. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  3. JavaScript事件冒泡和事件委托

    JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...

  4. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

  5. JavaScript事件——冒泡、捕获

    本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...

  6. Javascript事件冒泡机制

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...

  7. javascript事件冒泡

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...

  8. 解析Javascript事件冒泡机制(转) 本文转自:http://blog.csdn.net/luanlouis/article/details/23927347

    本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...

  9. 解析Javascript事件冒泡机制(转)

    本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...

随机推荐

  1. [转]Excel - How to lock cell without using macros if possible

    本文转自:http://stackoverflow.com/questions/11953214/excel-how-to-lock-cell-without-using-macros-if-poss ...

  2. 深入JVM系列(三)之类加载、类加载器、双亲委派机制与常见问题

    一.概述   定义:虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的java类型.类加载和连接的过程都是在运行期间完成的. 二. 类的 ...

  3. hyperstart 容器创建流程分析

    hyperstart中运行的pod的核心数据结构如下所示: struct hyper_pod { struct hyper_interface *iface; struct hyper_route * ...

  4. 【读书笔记《Android游戏编程之从零开始》】2.Hello,World!

    本人看的是PDF文档,很多都是直接都是复制粘贴的记录,简单的记录下笔记! 2.1 创建一个Android项目 Application Name: 应用名称(安装在手机上显示的名字)Project Na ...

  5. 注册其它地区Apple ID

    不同地区Apple Id需求 iPhone 最近换上了iPhone,想要下载其它国家地区的游戏,需要登录该国的Apple Id才能在itunes里下载. 下面记录一下我注册日本地区的Apple Id过 ...

  6. 分层开发(MySchool总结)

    由于分层之间存在各层之间的关系窗体之间的方法跳转,故有需要者可以进行下载本地文件 MySchool.rar 3304KB 5/22/2016 9:43:28 AM ,代码中有注释, 上述代码,属个人所 ...

  7. SQLite 解决:Could not load file or assembly 'System.Data.SQLite ... 试图加载格式不正确的程序/or one of its dependencies. 找不到指定的模块。

     Could not load file or assembly 'System.Data.SQLite.dll' or one of its dependencies. 找不到指定的模块. 错误提示 ...

  8. 使用grunt打包前端代码

    grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...

  9. PBR综合小实验视频-狮子XL

    这个是上学时候录的一个策略路由小实验

  10. C语言 预处理一(文件包含--#include)

    //预处理命令不需要在结束末尾加":" //#inlude可以包含任意类型的文件 //#inlude 将一个源文件的全部内容包含到另一个源文件中,成为它的一个部分,文件包含的一般格 ...